Problems, I hope you can help!

liunx · Jan 10, 2008

Hello there. Hope you're all well. 
 
I have a couple of questions about a CSS design I've mad, which is looking fine, however I've ran into a few problems. 
 
The site is located at <a class="postlink" href="http://geocities.com/abiy2k2003/test.html">http://geocities.com/abiy2k2003/test.html</a> for you to view. 
 
As you'll be able to see, the "content" (main content here text) is slighly "above" the top of "block 1", not sure why on earth this is occuring, and it's not happeningi n all browsers. It seems fine in Konqueror/IE, however in Firebird/Netscape/Opera i see the difference in line. 
 
I've tried for the leftside changing "top", "left", etc to "margin-top, margin-left" etc, but this makes it go completely wrong in IE. 
 
Also, I cannot get a margin from the bottom of the page to the bottom of the last block, if the content is shorter, and the left blocks reach the bottom, there's no space, i've tried various ways but cannot achieve it. 
 
Hopefully that's clear..apologies if not. 
If you can make any other suggestions, they're very welcome indeed! 
 
Hoping you'll be able to spot this, as it's getting me stressed now, hehe. 
 
Regards,Originally posted by skydan 
Hello there. Hope you're all well. 
 
I have a couple of questions about a CSS design I've mad, which is looking fine, however I've ran into a few problems. 
 
The site is located at <a class="postlink" href="http://geocities.com/abiy2k2003/test.html">http://geocities.com/abiy2k2003/test.html</a> for you to view. 
 
As you'll be able to see, the "content" (main content here text) is slighly "above" the top of "block 1", not sure why on earth this is occuring, and it's not happeningi n all browsers. It seems fine in Konqueror/IE, however in Firebird/Netscape/Opera i see the difference in line. 
 
I've tried for the leftside changing "top", "left", etc to "margin-top, margin-left" etc, but this makes it go completely wrong in IE. 
 
Also, I cannot get a margin from the bottom of the page to the bottom of the last block, if the content is shorter, and the left blocks reach the bottom, there's no space, i've tried various ways but cannot achieve it. 
 
Hopefully that's clear..apologies if not. 
If you can make any other suggestions, they're very welcome indeed! 
 
Hoping you'll be able to spot this, as it's getting me stressed now, hehe. 
 
Regards, your ads also jump up above your menus. If you must you might consider using hacks (owens hack) to send another value to ie then from opera and mozilla. Also the nav bar text is out of whack.wait, I looked in ie, and the content is over the nav in that too.Hiya. I think that's the Geocities advertising screwing a lot of it up! 
 
I've included the HTML and CSS here, if you get a chance you could open it locally to avoid the ads, sorry. 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>test.</title> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"css.css" type="text/css" /> 
</head> 
 
<body> 
<div id="container"> 
<div id="header"> 
<div id="topleft"> 
some logo. 
</div> 
 
<div id="topright"> 
some links. 
</div> 
</div> 
 
<div id="quicknav"> 
General Navigation. Some links. 
</div> 
 
<div id="leftside"> 
<div class="lefttitle"> 
Block 1 
</div> 
 
<div class="left"> 
text 
</div> 
 
 
<div class="lefttitle"> 
Block 2 
</div> 
 
<div class="left"> 
text 
</div> 
 
 
<div class="lefttitle"> 
Block 3 
</div> 
 
<div class="left"> 
text 
</div> 
 
 
<div class="lefttitle"> 
Block 4 
</div> 
 
<div class="left"> 
text 
</div> 
 
 
<div class="lefttitle"> 
Block 5 
</div> 
 
<div class="left"> 
text 
</div> 
</div> 
 
<div id="content"> 
 
main content here 
 
</div> 
 
</div> 
</body> 
</html> 
 
CSS: 
 
body { 
margin: 0px; 
padding: 0px; 
} 
div, p, tr, font, ul, td, th, p, small, .small { 
font-size: 10px; 
} 
#header { 
border-bottom: 1px solid #000000; 
height: 36px; 
} 
#topleft { 
text-align: left; 
float: left; 
} 
#topright { 
float: right; 
padding-top: 20px; 
text-align: right; 
} 
#quicknav { 
margin: 0px; 
padding: 0px; 
border-bottom: 1px solid #000000; 
text-align: right; 
} 
#content { 
border: 1px solid #888; 
padding: 15px; 
top: 75px; 
margin-top: 10px; 
margin-left: 150px; 
margin-right: 5px; 
margin-bottom: 10px; 
background-color: #fff; 
text-align: center; 
} 
#leftside { 
position: absolute; 
top: 75px; 
left: 10px; 
bottom: 10px; 
width: 130px; 
} 
.left { 
border-color: #999; 
border-style: solid; 
border-width: 0 1px 1px 1px; 
color: #333; 
font-size: 10px; 
font-weight: normal; 
padding: 7px; 
} 
.lefttitle { 
border: 1px #999 solid; 
font-weight: bold; 
padding: 2px; 
text-align: center; 
} 
.pagetitle { 
font-size: 12px; 
font-weight: bold; 
} 
A:link, A:active, A:visited { 
color: #000099; 
font-size: 10px; 
text-decoration: none; 
}http://www.quasi-ke.servebeer.com/yoursite.html 
Looks exactly the same in ie and mozilla, both have the content above the menus.Hiya thanks. 
 
Apart from those problems I mentioned, I don't see anything else wrong? How do you mean exactly? 
 
I've looked at it in Konqeror, IE6, Firebird 0.7? 
 
EDIT: yes, in IE it's now over the nav too and in Konqueror. Sorry, slow on the uptake there

What do you think's wrong?Originally posted by skydan 
Hiya thanks. 
 
Apart from those problems I mentioned, I don't see anything else wrong? How do you mean exactly? 
 
I've looked at it in Konqeror, IE6, Firebird 0.7? Well on the right side, you have 3 lines of text that are not inline, but are jumping out from the div that contains them.If you mean those "some links", and below "general navigation, some links" this is something I did purely so it contained no content. On my LAN where I have this design running, that "some links" is a paragraph with a few quick links, and "general navigation/some links" contains a paragraph which contains a select menu. 
 
EDIT: Although it probably makes no dif, I removed the "padding-top" from the "topleft" css as it wasn't needed

Problems, I hope you can help!

liunx

Guest