| mobile css
|
dupalo
msg:4424568 | 7:02 pm on Mar 3, 2012 (gmt 0) |
HI there, I am trying to fix something on my website and therefore doing some testing with mobile css (I use opera mini emulator [opera.com ] ).
I am testing this code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="description" content="Digital photography">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
@media all and (max-width: 480px) {
#main_picture { background:yellow; width:90%; height: 450px; border: 4px solid red; margin: 0 auto; }
img { width: 100%; }
}
</style>
</head>
<body>
<div id = "main_picture" style ="width: 50%; height: 150px; border: 1px solid red; margin: 0 auto;">
<div style = "border:1px solid green; width:30%; background:blue; height:10%;">
</div>
</div>
<p>
<img src = "home_0.jpg" alt = " " class = "active" >
</p>
</body>
</html>
and I have noticed something very weird.
From what I understand the @rule should apply only to mobile devices with a max-width of 480px. When I run the code in the operamini emulator, I noticed that the #main_picture is picking up a width of 50% and not 90% as it should. Also it has a border of 1px and not 4px as it should as specified in the media rule. Now I wonder, why the code in the media rule is ignored and it defaults to the main css?
thanks
|
alt131
msg:4426566 | 5:26 pm on Mar 8, 2012 (gmt 0) |
Hi dupalo, not so much ignoring the mobile css, but rather it is being over-written by the inline style.
Recall rules are applied in order of:
external sheet
embedded sheet (in the head of the doc)
inline style
So the widths and border specified in the inline style over-ride the ones specified in the embedded sheet.
|
|
|
