Web Design Forums

Ehab · 21-04-2008, 20:48

I finally got the basic layout to look good in firefox, then I decide to preview it in IE and whoa! everything is thrown off way to the right that I have to scroll to view the whole content. Anybody know what I'm doing wrong or how to fix this ??

CSS + HTML:
body
{
margin: 0;
padding: 0;
text-align: center;
background: #000000;
}

#container
{
margin: 0 auto;
width: 80%;
}

#contentBack
{
position:absolute;
top: 0;
z-index: 0;
background-image: url(images/bg2.png);
background-repeat: repeat-y;
width: 975px;
height: 100%;
}

#contentFront
{
position: absolute;
top: 0;
z-index: 1;
margin-left:25px;
background-image: url(images/WSNEW.png);
width: 925px;
height: 100%;
}

-

<body>
<div id="container">
<div id="contentBack"></div>
<div id="contentFront"></div>
</div>
</body>
</html>

pgo · 21-04-2008, 21:56

Why are you using absolute positioning again?

Ehab · 21-04-2008, 21:58

I think I have to for the z-index tag to work.

cgl · 01-05-2008, 09:37

Without seeing the design it's hard to know exactly, but it looks like you could build this more easily without absolute positioning.

Like this maybe:

body
{
margin: 0;
padding: 0;
text-align: center;
background: #000000;
}

#contentBack
{
width: 975px;
height: 100%;
margin:0 auto;
background-image: url(images/bg2.png);
background-repeat: repeat-y;
}

#contentFront
{
margin-left:25px;
width: 925px;
height: 100%;
background-image: url(images/WSNEW.png);
}

-

<body>

<div id="contentBack">
<div id="contentFront"></div>
</div>

</body>

Ehab · 01-05-2008, 09:46

Good call. I am not using this layout anymore, and I'm also trying to avoid absolute positioning as much as possible after reading more about it in many CSS articles and books. It gets kind of unpredictable with different resolutions and browsers I guess, especially IE.

ifohdesigns · 02-05-2008, 13:09

Make sure you are using a proper doctype as well, maybe you all ready are, but we cannot tell from just that snippet of html.

StumpyXL · 02-05-2008, 13:45

Don't worry though, I started with absolute positioning because DW8 makes it really simple.

flappypenguin · 02-05-2008, 18:09

not that Absolute positioning is bad, it has its place... maybe just not for layout. A small tip for you, (you may know this, but allot of people dont), if you have a 200px wide div, and you add a left and right padding of 10px, you need to subtract 20px from the width, this may clear up some IE issues for you. Again, you may well know this... just a bit of friendly advice in case you didnt hehe.

flappypenguin · 02-05-2008, 18:13

Also, it helps if you "zero down" all your elements, i make it a habit to add

margin: 0px;
padding 0px;

To almost all my elements, as some browsers default margins and paddings are slightly different, if you dont do this.. the browser will set its own margin/padding on certain elements.

Larixk · 02-05-2008, 18:15

or you just use a reset css, like any sane designer would

flappypenguin · 02-05-2008, 18:18

yeah true, but i like to use my own code

pgo · 04-05-2008, 01:24

Quote:

Originally Posted by flappypenguin

yeah true, but i like to use my own code

So, you'd rather use "your own" grossly inferior method of setting baseline styles - and reinvent the wheel in the process - when others who are better developers than your or I (Yahoo and Eric Meyer) have already done the hard work?

"My own code."

21-04-2008, 20:48	#1 (permalink)
Ehab is gta4 addicted.. Join Date: Apr 2008 Location: San Diego, CA Posts: 24	IE issue I finally got the basic layout to look good in firefox, then I decide to preview it in IE and whoa! everything is thrown off way to the right that I have to scroll to view the whole content. Anybody know what I'm doing wrong or how to fix this ?? CSS + HTML: body { margin: 0; padding: 0; text-align: center; background: #000000; } #container { margin: 0 auto; width: 80%; } #contentBack { position:absolute; top: 0; z-index: 0; background-image: url(images/bg2.png); background-repeat: repeat-y; width: 975px; height: 100%; } #contentFront { position: absolute; top: 0; z-index: 1; margin-left:25px; background-image: url(images/WSNEW.png); width: 925px; height: 100%; } - <body> <div id="container"> <div id="contentBack"></div> <div id="contentFront"></div> </div> </body> </html>

21-04-2008, 21:56	#2 (permalink)
pgo Moderator Join Date: Jan 2005 Location: Brooklyn, NYC Posts: 11,869	Why are you using absolute positioning again? __________________ Find good advice in the beginners web design thread. patrick o'neill web developer \| blog \| spam humor

02-05-2008, 18:15	#10 (permalink)
Larixk Senior Member Join Date: Sep 2006 Location: Utrecht, Netherlands Posts: 856	or you just use a reset css, like any sane designer would __________________ larixk.nl/

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

21-04-2008, 21:58	#3 (permalink)
Ehab is gta4 addicted.. Join Date: Apr 2008 Location: San Diego, CA Posts: 24	I think I have to for the z-index tag to work.

01-05-2008, 09:37	#4 (permalink)
cgl Registered User Join Date: May 2008 Posts: 6	Without seeing the design it's hard to know exactly, but it looks like you could build this more easily without absolute positioning. Like this maybe: body { margin: 0; padding: 0; text-align: center; background: #000000; } #contentBack { width: 975px; height: 100%; margin:0 auto; background-image: url(images/bg2.png); background-repeat: repeat-y; } #contentFront { margin-left:25px; width: 925px; height: 100%; background-image: url(images/WSNEW.png); } - <body> <div id="contentBack"> <div id="contentFront"></div> </div> </body>

01-05-2008, 09:46	#5 (permalink)
Ehab is gta4 addicted.. Join Date: Apr 2008 Location: San Diego, CA Posts: 24	Good call. I am not using this layout anymore, and I'm also trying to avoid absolute positioning as much as possible after reading more about it in many CSS articles and books. It gets kind of unpredictable with different resolutions and browsers I guess, especially IE.

02-05-2008, 13:09	#6 (permalink)
ifohdesigns Registered User Join Date: May 2008 Location: Providence, RI Posts: 6	Make sure you are using a proper doctype as well, maybe you all ready are, but we cannot tell from just that snippet of html.

02-05-2008, 13:45	#7 (permalink)
StumpyXL Registered User Join Date: Apr 2008 Location: Ohio Posts: 61	Don't worry though, I started with absolute positioning because DW8 makes it really simple.

02-05-2008, 18:09	#8 (permalink)
flappypenguin shouting at a monitor! Join Date: May 2008 Location: Glasgow, Scotland Posts: 10	not that Absolute positioning is bad, it has its place... maybe just not for layout. A small tip for you, (you may know this, but allot of people dont), if you have a 200px wide div, and you add a left and right padding of 10px, you need to subtract 20px from the width, this may clear up some IE issues for you. Again, you may well know this... just a bit of friendly advice in case you didnt hehe.

02-05-2008, 18:13	#9 (permalink)
flappypenguin shouting at a monitor! Join Date: May 2008 Location: Glasgow, Scotland Posts: 10	Also, it helps if you "zero down" all your elements, i make it a habit to add margin: 0px; padding 0px; To almost all my elements, as some browsers default margins and paddings are slightly different, if you dont do this.. the browser will set its own margin/padding on certain elements.

02-05-2008, 18:18	#11 (permalink)
flappypenguin shouting at a monitor! Join Date: May 2008 Location: Glasgow, Scotland Posts: 10	yeah true, but i like to use my own code

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)