StateRd84 Posted May 11, 2012 Share Posted May 11, 2012 I am having an issue between browsers when using absolute positioning along with percentage values. I want the elements to be able to resize along with the window size. I have attached pictures to show the results in Opera and Safari. Below is my HTML and CSS. Please help. Thanks. HTML: <!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>PLJ New Layout</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="demo.css" rel="stylesheet" type="text/css" /></head><body><div id="header"><div id="sitebranding"></div><!--end of sitebranding division(H1)--></div><!--end of header division--><div id="tagline"></div><!--end of tagline division--><div id="bodyContainer"><div id="sidebar"></div><!--end of sidebar division--></div><!--end of container division--><div id="content"></div><!--end of content division--></body></html> CSS: /*Demo purposes only for cross browser issue*/* { padding: 0; margin: 0;}#header { position: absolute; border: 3px solid #000; background: blue; height: 15%; width: 75%; margin-top: 1%; margin-left: 12%;}#bodyContainer { position: absolute; border: 3px solid #000; background: blue; height: 80%; width: 75%; margin-top: 17%; margin-left: 12%;} Link to comment Share on other sites More sharing options...
dsonesuk Posted May 11, 2012 Share Posted May 11, 2012 absolute position should not be used, margin, padding and float should be used instead, using % height for header, and body container is not going work to give a 100% height as padding, borders, and margins all have to be taken into account. Link to comment Share on other sites More sharing options...
thescientist Posted May 12, 2012 Share Posted May 12, 2012 Did you read what I said in your other post? If you are using positioning for your layout, then you are not using the box model. Read the CSS tutorials so you can familiarize yourself with the box model. It is the preferred/standard way to layout a page.http://www.w3schools...ss_boxmodel.asp Don't use absolute positioning for your layout. Take the time to learn CSS and the box model. Link to comment Share on other sites More sharing options...
StateRd84 Posted May 12, 2012 Author Share Posted May 12, 2012 So, do not use any positioning at all? Rely on margin and padding? That's why they call it learnin', right? Thank you. Link to comment Share on other sites More sharing options...
thescientist Posted May 12, 2012 Share Posted May 12, 2012 use positioning for specific instances, like overlays, or tooltips. But not for layouts. For the exact reason you are having troubles. Link to comment Share on other sites More sharing options...
StateRd84 Posted May 12, 2012 Author Share Posted May 12, 2012 Got it!! It worked perfect. Thanks for the advice Yes I did take the time with the Box Model. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now