homepage Welcome to WebmasterWorld Guest from 54.226.10.234
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
mobile css
dupalo



 
Msg#: 4424566 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4424566 posted 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved