Jump to content

Layout problem cross-browser


StateRd84
 Share

Recommended Posts

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%;}

post-96148-0-34505300-1336766607_thumb.png

post-96148-0-63084600-1336766625_thumb.png

Link to comment
Share on other sites

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...