my browser does not change website according to my CSS stylesheet
Question
I really don't know what to do. my browser does not change when I change the CSS
the case is like this : I have a class called wraper in CSS and html, this class is a div wrapping 2 childs divs I applied display : none to this class, so this class shouldn't be visible, but in fact, the div is visible
so I inspect the element, and I found that the div does not have class in browser console, just user agent stylesheet
here is the screenshot :
div class='wraper' only has user agent stylesheet and even though I set the height and width to 900px and 300px, when I inspect the div has 1343px x 0px
the structure of the HTML is like this :
<div class='wraper'>
<div class='gambar-testi'></div>
<div class='preview-testi'><h2> Testimoni</h2>
<span>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Pellentesque erat ex, dapibus sit
amet lobortis eget, consequat vel nisi. Aliquam ac
enim eget libero pretium venenatis id sed nibh.</span></div>
and CSS :
.wraper {
width : 900px;
height : 300px;
display : none;
}
.gambar-testi {
display : inline-block;
margin : 10px;
background-color : red;
width : 47%;
height : 340px;
}
.preview-testi {
width : 47%;
display : inline-block;
margin : 0 30px;
}
.preview-testi span {
font-size : 30px;
}
another problem, I just changed .gambar-testi attribute from float : left to display : inline-block a few moments ago I inspect the element in browser console and it shows the attribute is still float : left not yet changed to display : inline-block
.wraper { width : 900px; height : 300px; display : none } .gambar-testi { display : inline-block; margin : 10px; background-color : red; width : 47%; height : 340px; } .preview-testi { width : 47%; display : inline-block; margin : 0 30px; } .preview-testi span { font-size : 30px; color : black; }
<html> <head></head> <body> <div class="wraper"> <div class="gambar-testi"></div> <div class="preview-testi"><h2> Testimoni</h2> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque erat ex, dapibus sit amet lobortis eget, consequat vel nisi. Aliquam ac enim eget libero pretium venenatis id sed nibh.</span> </div> </div> </body> </html>
I also tried Jsfiddle to recreate the problem but the result is not showing here is the link : https://jsfiddle.net/xqxkzhfL/
also tried creating it in SO code Snippet but the result is not showing too please help I already don't know what to do anymore... this is all I know so far
EDIT sorry I was stupid, in jsfiddle and SO code snippet I applied display : none to .wraper so of course is does not show results because the display is none... yeah it works in jsfiddle and SO code snippet but it does not work in my localhost ..... why?
1 answers
solution1
0 2016-12-20 03:32:44
Please ensure your browser won't cached your old web page In chrome, keep "Developer Console (F12) appeared, and then Settings->Network->Disable cache(while DevTools is open)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.