PDA

View Full Version : CSS, advice needed on positioning and IE bugs


tux
01-17-2008, 09:08 AM
I have started learning CSS and am rebuilding a website as a sort of learning curve. For your ref. the origonal site is here... http://www.photographybydantucker.com and the new CSS page is here...
http://www.photographybydantucker.com/index3.php.

I have come across several probs. although have managed to get the basic structure done. I have made the temp. content deep to force the page to scroll as the idea is to always see the decor (blue stripes etc.) as the page is scrolled. As you will see, if you scroll to the bottom, I have my first prob. the div will not exend fully as the page it scrolled. The left logo and a right blue stripe image is added and fixed at the bottom. So how do I get the divs to extend as the pag is scrolled.

Next up is the navigation. I have got the images in place okay but would like them centered above the content area. The div is 100% across the screen, if I position it left: 147px; I get hoz scroll bars.

The biggy though is the dreaded IE. All so far seems ok on Opera and FF but is all over the place in IE.

Any help on these probs would be great and also advice on whether my CSS is generally okay or not.

Thanks guys.

Oh! here's my code....

CSS....


html, body {
margin: 0;
padding: 0;
}
h3 {
margin: 0px;
padding: 0px;
}
#page-container {
width: 100%;
margin: 0px;
}

#header {
background: #0095D7;
height: 110px;
z-index: 2;
}

#header img.logo {
position: absolute;
right: 0px;
}

#header img.fade {
position: absolute;
right: 400px;
}

#header img.left_cnr {
position: absolute;
left: 0px;
}
#nav {
position: absolute;
margin: 0px;
background: #666666;
background-image: url('Images/top_dtl.gif');
backgound-repeat: repeat-x;
top: 110px;
right: 0px;
width: auto;
height: 36px;
float: right;
z-index: 3;
}

#nav img {
display: inline;
}

#nav img.Home_dk_hlt {
position: absolute;
top: 0px;
left: 200px;
}

#nav img.Gal_dk {
position: absolute;
top: 0px;
left: 292px;
}

#nav img.Abt_dk {
position: absolute;
top: 0px;
left: 381px;
}

#nav img.Shp_dk {
position: absolute;
top: 0px;
left: 470px;
}

#nav img.Lks_dk {
position: absolute;
top: 0px;
left: 559px;
}

#nav img.Cnt_dk {
position: absolute;
top: 0px;
left: 648px;
}

#left_decor {
position: absolute;
top: 0px;
left: 0px;
background-image: url('Images/left_dtl.gif');
background-repeat: repeat-y;
height: 100%;
width: 147px;
z-index: 5;
}

#left_decor img.left_dtl_top {
position: absolute;
top: 110px;
left: 0px;
}

#left_decor img.logo_left {
position: fixed;
bottom: 0px;
}
#content {
position: absolute;
top: 165px;
left: 147px;
width: 80%;
height: 800px;
padding: 10px;
border: 1px;
border-style: solid;
border-colour: black;
z-index: 8;
}
#footer {
position: absolute;
height: 10px;
left: 0px;
bottom: 0px;
padding: 10px;
border: 1px;
border-style: solid;
border-colour: black;
z-index: 9;
}
#right_decor {
position: absolute;
top: 0px;
right: 0px;
background-image: url('Images/rgt_dtl.gif');
background-repeat: repeat-y;
height: 100%;
width: 35px;
z-index: 6;
}
#right_decor right_cnr {
position: absolute;
top: 0px;
right: 0px;
}
#right_decor img.rgt_dtl_btm {
position: fixed;
bottom: 0px;
right: 0px;
}
#right_decor spacer {
position: absolute;
bottom: 0px;
right: 0px;
height: 1px;
width: 1px;
}




html...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Photography By Dan Tucker</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">
@import "layout.css";
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="page-container">
<div id="header" style="position:absolute; width:100%; z-index:7">
<img src="Images/fade.gif" class="fade" id="fade" />
<img src="Images/logo.gif" class="logo" id="logo" />
<img src="Images/left_cnr.gif" class="left_cnr" id="left_cnr" /></div>
<div id="left_decor"><img src="Images/left_dtl_top.gif" class="left_dtl_top" id="left_dtl_top" />
<img src="Images/logo_left.gif" class="logo_left" id="logo_left" /></div>
<div id="nav" style="position:absolute; width:100%; z-index:4">
<p></p><a href="#"><img src="Images/Buttons/Home_dk_hlt.gif" border="0" class="Home_dk_hlt" id="Home_dk_hlt" /></a></p>
<p><a href="#"><img src="Images/Buttons/Gal_dk.gif" border="0" class="Gal_dk" id="Gal_dk" /></a></p>
<p><a href="#"><img src="Images/Buttons/Abt_dk.gif" border="0" class="Abt_dk" id="Abt_dk" /></a></p>
<p><a href="#"><img src="Images/Buttons/Shp_dk.gif" border="0" class="Shp_dk" id="Shp_dk" /></a></p>
<p><a href="#"><img src="Images/Buttons/Lks_dk.gif" border="0" class="Lks_dk" id="Lks_dk" /></a></p>
<p><a href="#"><img src="Images/Buttons/Cnt_dk.gif" border="0" class="Cnt_dk" id="Cnt_dk" /></a></p>
</div>
<div id="content"><h3>Future Content</h3>
<div id="footer"><h3>Future Footer</h3>
</div>
</div>
<div id="right_decor">
<img src="Images/rgt_cnr.gif" class="rgt_cnr" id="rgt_cnr" />
<img src="Images/rgt_dtl_btm.gif" class="rgt_dtl_btm" id="rgt_dtl_btm" />
</div>
</div>
</body>
</html>

domedia
01-17-2008, 01:36 PM
This page looks good to me:
http://www.photographybydantucker.com/index3.php

Why don't you insert your content so you can see how it really works out? You don't want to set a height on your #content, you want the page to naturally stretch as a product of your content.

For your nav, just remove the width. It's a block element, it will grab the available width anyways.

tux
01-17-2008, 06:28 PM
Thanks for the reply Domedia. Are you viewing the page in IE, coz when I view it in IE it is all over the place. It only displays ok in FF and Opera.

I removed the width as you suggested but how can I make the Nav Buttons display in the center of the Content white space.

I have used the height on the #content Div to just see the effect that the content will have when it scrolls, I'll remove it when I add the content. The new content is going to be PHP and is not ready yet. The problems is how to extend the div down as the page scrolls. If you scroll now to the bottom you will see a gap in the decor on the left and right.

Thanks for your help.

Paul

domedia
01-17-2008, 07:39 PM
Yes I'm viewing it in IE7 and it looks swell :-?

tux
01-17-2008, 08:12 PM
I'm using IE6 and everything is messed up.

Any ideas about the other issues.

Cheers

domedia
01-17-2008, 09:01 PM
hi tux, as long as you keep the online copy up to date I'll take a look at it later. bump this thread if I forget

tux
01-19-2008, 10:55 AM
I have managed to get the blue lines to extend now by nesting the divs differently.

Still have the IE6 issue, displays totally wrong.

Also, need the nav to center above the white space and not center of screen.

Old site here... http://www.photographybydantucker.com

New page here.... http://www.photographybydantucker.com/index3.php

CSS here..... http://www.photographybydantucker.com/layout.css

I'm sure my CSS needs a good looking at. Could someone have a look and see if I'm doing things correctly and more to the point what I'm doing wrong.

Thanks, Paul.

Cary
01-20-2008, 05:43 AM
Here's some code you can use/take a look at. I tried a rollover trick for the menu which doesn't seem to work too well in IE6 on my computer. It would still require preloading of images. A better method (http://wellstyled.com/css-nopreload-rollovers.html) places all the button states in a single image.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Photography By Dan Tucker</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="layout.css">

<!-- The following conditional code allows the embedded styling to be seen only by IE 6 or less. IE 6 doesn't understand min-width, so this proprietary IE code will take care of that. -->

<!--[if lte IE 6]>
<style type="text/css">
#wrapper {
width:expression( documentElement.clientWidth < 720 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 720 ? "720" : "auto") : "720px") : "auto" );
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><img id="logo" src="Images/logo.gif" alt="Photography By Dan Tucker" width="400" height="110"></h1>
</div>
<div id="nav"><!-- has left_dtl_top.gif background and left padding -->
<div><!-- for rgt_cnr.gif background and right padding -->
<div><!-- for top_dtl.gif background -->
<ul><!-- centered using auto margins, so it's not used to hold a background -->
<li><a id="link_home" href="#"><span></span>Home</a></li>
<li><a id="link_gallery" href="#"><span></span>Gallery</a></li>
<li><a id="link_about" href="#"><span></span>About</a></li>
<li><a id="link_shop" href="#"><span></span>Shop</a></li>
<li><a id="link_links" href="#"><span></span>Links</a></li>
<li><a id="link_contact" href="#"><span></span>Contact</a></li>
</ul>
</div>
</div>
</div><!-- end of #nav -->
<div id="content">
<p>Some Content Here.</p>
</div>
<img id="logo_left" src="Images/logo_left.gif" alt="" width="147" height="297">
</div>
</body>
</html>

/* Uses 100% height code for div#wrapper as explained at http://www.sitepoint.com/forums/showpost.php?p=1243541&postcount=8 */

/* commented backslash hack \*/
html, body {height:100%;}
/* end hack */

html, body {
min-height: 100%;
margin:0;
padding:0;
}
body {
background: #FFFFFF url(Images/left_dtl.gif) repeat-y left top;
color:#000000;
}
#wrapper {
min-height: 100%; /* IE 6 doesn't understand "min-height" */
background: url(Images/rgt_dtl.gif) repeat-y right top;
min-width: 720px;
height: auto;
position: relative;
}
* html #wrapper { /* Only IE 6 (and maybe IE 5?) will see this because it starts with "* html" */
height: 100%; /* IE 6 treats height as if it's min-height */
}
#header {
background: #0095D7 url(Images/left_cnr.gif) repeat-y left top;
height: 110px;
}
#header h1 {
margin:0; /* to avoid gaps above and below the logo image */
}
#logo {
float: right;
background: url(Images/fade.gif) no-repeat left top;
padding-left: 181px; /* padding leaves room for fade.gif background */
}
#nav {
background: url(Images/left_dtl_top.gif) no-repeat 0 0;
padding-left: 147px;
margin: 0;
}
#nav div {
background: url(Images/rgt_cnr.gif) no-repeat 100% -110px;
height: 57px;
padding-right: 35px;
margin: 0;
}
#nav div div {
background: url(Images/top_dtl.gif) repeat-x 0 0;
padding: 0; /* to negate the padding applied by "#nav div" */
}
#nav ul {
clear: both;
list-style: none;
margin: 0 auto;
padding: 0;
width: 537px;
}
#nav li {
display: inline;
padding: 0;
margin: 0;
}

/* Image replacement is used below to "replace" link text with button images. Actually, the images are placed in spans which then cover the link text */

#nav a {
display: block;
float: left;
width: 89px;
height: 36px;
text-decoration: none; /* If images are turned off */
padding: 0;
margin: 0;
position: relative; /* Made relative so its span can be positioned precisely on top of it */
overflow: hidden; /* Make sure text doesn't peek out from under span containing button image */
text-align: center; /* If images are turned off */
}
#nav a span { /* hide text under span which contains button image as a background */
display: block;
position: absolute;
width: 89px;
height: 36px;
top: 0;
left: 0;
}
a#link_home {
width: 92px; /* the home link's button image is wider than the others */
}

/* add button image backgrounds to spans */
a#link_home span {
background-image: url(Images/Buttons/Home_dk_hlt.gif);
width: 92px;
}
a#link_home:hover span {
background-image: url(Images/Buttons/Home_lt.gif);
}
a#link_gallery span {
background-image: url(Images/Buttons/Gal_dk.gif);
}
a#link_gallery:hover span {
background-image: url(Images/Buttons/Gal_lt.gif);
}
a#link_about span {
background-image: url(Images/Buttons/Abt_dk.gif);
}
a#link_about:hover span {
background-image: url(Images/Buttons/Abt_lt.gif);
}
a#link_shop span {
background-image: url(Images/Buttons/Shp_dk.gif);
}
a#link_shop:hover span {
background-image: url(Images/Buttons/Shp_lt.gif);
}
a#link_links span {
background-image: url(Images/Buttons/Lks_dk.gif);
}
a#link_links:hover span {
background-image: url(Images/Buttons/Lks_lt.gif);
}
a#link_contact span{
background-image: url(Images/Buttons/Cnt_dk.gif);
}
a#link_contact:hover span {
background-image: url(Images/Buttons/Cnt_lt.gif);
}
#content {
margin: 0 32px 0 145px;
clear: both;
}
#logo_left {
position:absolute;
bottom: 0;
left:0;
}
img {
border: none;
}

tux
01-20-2008, 07:07 PM
Cary, thanks. You are a living legend. It all works fine apart from a couple of minor points.

I changed the left logo from position: absolute; to position: fixed; as it needs to be visible all the time. It is okay in FF, Opera etc. but I dont think IE supports fixed positioning. The Image does not position correctly and does not fix in position. Is there a get around.

Also, the right detail stops short a bit in Opera.

Thanks again Cary, I really appreciate your help.

Regards

Paul

Cary
01-20-2008, 08:22 PM
Cary, thanks. You are a living legend.

No, I'm just using what others come up with.

I changed the left logo from position: absolute; to position: fixed; as it needs to be visible all the time. It is okay in FF, Opera etc. but I don't think IE supports fixed positioning. The Image does not position correctly and does not fix in position. Is there a get around.

You're right. IE 6 doesn't support that. You could place something like this after the normal fixed styling:

* html #logo_left {
position:absolute;
left:0;
top: 200px;
}

Other browsers will ignore this because the selector starts with "* html", and IE 6 will give it precedence over the fixed styling which comes earlier in the style sheet.

Also, the right detail stops short a bit in Opera.

I couldn't figure out why that was happening, but I'm still looking into it.

tux
01-20-2008, 09:46 PM
Thanks Cary,

I added this...

* html #logo_left {
position:absolute;
left:0;
bottom: 0px;
}

.... and the logo positions okay now in IE6. Have to live with it not being fixed in IE6.

Do you know if IE7 supports fixed positioning.

Cary
01-20-2008, 10:58 PM
I believe it does as far as this sort of thing goes.

Cary
01-21-2008, 04:03 AM
Also, the right detail stops short a bit in Opera.

This is being caused by the bottom margin of the text in #content. You can fix it with this:

#content p {
margin-bottom: 0; /* Bottom margin needs to be 0 to avoid gap at bottom of page in Opera. */
}

You can still use the other three margins and any padding you like on the paragraphs. I suspect that anything else such as h1's, h2's, etc. in the content will also need their default bottom margins removed.

tux
01-21-2008, 09:21 AM
Thanks for all your help Cary. All seems great with the layout now. Its been beneficial to see the code writen down. I printed it out and followed it through so I understood how it worked and what each bit did.

I can start to concentrate on rebuilding the content now. Back to the PHP.

Thanks again Cary. Regards,

Paul