Web Design Forum: Height and margins not working in IE - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Height and margins not working in IE Rate Topic: -----

#1 User is offline   Danotto 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 1
  • Joined: 02-January 11
  • Reputation: 0

Posted 02 January 2011 - 12:45 AM

Hello, I apologize if a solution to this problem has already been provided, but I'm intensly agrivated by IE's not following standards. I have a site in which I declare height in percentages of two divs within the body wrapper:

<style type="text/css">

body {margin: 0; padding: 0;}
#bodywrapper {width: 100%; margin: 0 auto; padding: 0;}
#titlewrapper {width: 100%; background-color: blue; height: 25%;}
#contentwrapper {width: 75%; margin: 0 auto; padding: 0; 
background-color: red; height: 75.4%; -moz-border-radius: 20px; border-radius: 20px;}
#leftsidebar {width: 12.4%; height: 75%; float: left; border: 1px solid black; -moz-border-radius: 15px; border-radius: 15px;} 
#rightsidebar {width: 12.4%; height: 75%; float: right; border: 1px solid black;-moz-border-radius: 15px; border-radius: 15px;}
#vline {position: relative; top: 15%; left: 50%; background-color: black; width: 1px; height: 75%;} 
#rightcontent {width: 45%; height: 90%; border: 1px solid black; 
-moz-border-radius: 20px; border-radius: 20px; float: right; position: relative; top: 5%;}
#leftcontent {width: 45%; height:90%; border: 1px solid black; position: 
relative; top: 5%; 
-moz-border-radius: 20px; border-radius: 20px; float: left;}
</style>


</head>

<body>
<div id="bodywrapper">
<div id="titlewrapper">
</div>
<div id="contentwrapper"><div id="leftcontent"></div>
<div id="rightcontent"></div><div id="vline">
</div>

</div>
</div>


and the margin's all messed up (in internet explorer), but the page looks fine in firefox and chrome. Could anyone recommend a site where they describe an official method to fix compatibility issues with IE? Thank you!

This post has been edited by Danotto: 02 January 2011 - 12:57 AM

0

#2 User is offline   Wickham 

  • Web Guru
  • View gallery
  • Group: Moderators
  • Posts: 2,875
  • Joined: 11-June 09
  • Reputation: 257
  • Gender:Male
  • Location:Salisbury UK
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 02 January 2011 - 07:10 AM

height as a % is very unreliable and I would advise against using it. Use fixed heights or don't state a height at all and let divs find their own height.

Note that you have styles for #leftsidebar and #rightsidebar but haven't used them.
So you have titlewrapper height: 25%
#contentwrapper height: 75.4%; (why 75.4%?)
Total height 100.4%
#leftsidebar and #rightsidebar height: 75% (unused)
#leftcontent and #rightcontent height: 90% plus top: 5%
This code does seem to produce what you want in IE7 and Firefox:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Test</title>

<style type="text/css">
html, body { height: 100%; }
body {margin: 0; padding: 0;}
#bodywrapper {width: 100%; margin: 0 auto; padding: 0; height: 100%;}
#titlewrapper {width: 100%; background-color: blue; height: 25%;}
#contentwrapper {width: 75%; margin: 0 auto; padding: 0; 
background-color: red; height: 75%; -moz-border-radius: 20px; 
border-radius: 20px;}
#leftsidebar {width: 12.4%; height: 75%; float: left; border: 1px solid 
black; -moz-border-radius: 15px; border-radius: 15px;} 
#rightsidebar {width: 12.4%; height: 75%; float: right; border: 1px solid 
black;-moz-border-radius: 15px; border-radius: 15px;}
#vline {position: relative; top: 15%; background-color: black; 
width: 1px; height: 75%; margin: 0 auto;} 
#rightcontent {width: 45%; height: 90%; border: 1px solid black; 
-moz-border-radius: 20px; border-radius: 20px; float: right; position: 
relative; top: 5%;}
#leftcontent {width: 45%; height:90%; border: 1px solid black; position: 
relative; top: 5%; 
-moz-border-radius: 20px; border-radius: 20px; float: left;}
</style>

</head>

<body>
<div id="bodywrapper">
<div id="titlewrapper">titlewrapper</div>
<div id="contentwrapper">
<div id="leftcontent">leftcontent</div>
<div id="rightcontent">rightcontent</div>
<div id="vline"></div>
</div>
</div>

</body>
</html>

This post has been edited by Wickham: 02 January 2011 - 07:30 AM

0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users