HTML & CSS
i have the following div heigh measurements for my web page:
content: 1350px - emcompasses the next 3 divs
imagecontent: 1200px - used to display images as thumbnails
footer - 50px
On paper they calculate fine, however, after i have impletemented this in real life, i notice that with regards to my content div, it seems to grow in height by almost 50px forcing my footer to drop slighly lower down to the page and not taking affect of my footer details e.g background-color.
One thing i tried to experiment with was the content div, I tried to decrease the size of my heigh to 1250px but by doing so it revealed my footer but css used the background color of my wrapper to somehow overlap it making the background color red and completely disregarding my footer details.
Please help if you can.
html test file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title> Shanghai Trip 2010</title>
<link rel="stylesheet" type="text/css" href="style_V1.css" />
<h1> SHANGHAI TRIP 2010 </h1>
<li><a href="index.php?link=shanghaizoo">Shangai Zoo</a></li>
<li><a href="index.php?link=chengtemple">Cheng Huang Temple</a></li>
Date created: 7th October 2010
Last Modified: 7th October 2010
font-family: Trebuchet MS, Arial, Times New Roman;
/* first value represents top/bottom, while second represents left/right margin */
margin: 0px auto;
border: 1px solid #330066;
border: 1px solid #ff8000;
border: 1px solid red;
border: 1px solid black;
The page is not on the web as it is not finished but if you wouldn't mind simply copying and pasting the code onto your editors, you will see what i mean
You haven't takes into account padding margins or borders into your calculations.
There are default margins on most elements which may upset your calculations but you have also added padding and borders to elements without decreasing their width or height correspondingly.
However, you should not be designing like that anyway as you shouldn't set height on content areas. The content should dictate the height and not some arbitrary figure that you throw at it.
Remove the height from your main content elements and let the grow with content. In that way users can resize text without breaking the page and you can add or remove content without having to change the css.
You will very rarely use height on content areas like that.
your footer is #footer in the markup and .footer in the css. so a class selector is no match for an id attribute
and i've looked at the computed style for the #content in ch, ie, ff and it's saying 1350px
What Paul said is pretty much spot on. Your dictating heights for the content area is just as bad as your not declaring line-height or worse, the use of PX fonts on body pretty well throwing accessibility right out the window!
It also doesn't help that you are stating widths over and over again for no good reason... or that you have div -- like #header -- which are completely pointless (since you could just style the h1 directly) or the extra DIV around #content.
Though it's hard to tell what markup you should have without actual content inside it. In particular .pageDesc and .imageswrapper are hard to fathom the point of at this point.
I would get a CSS reset in there so cross-browser design is simpler, remove the 900px width declarations off everything except #wrapper as being COMPLETELY pointless (since block level tags auto expand to whatever they're inside!), lose the 1500px fixed height as bad design practice, probably lose the fixed height on the navigation too, getting rid of the DIV's around the h1 and UL as pointless, get rid of the PX metric fonts at the very least on BODY and the content areas, etc, etc, etc...
Bottom line is you've got more markup than you probably need, and are declaring widths and heights on things that shouldn't need widths on them and fixed heights are a bad idea.
You may also want to try using consistent single tabs instead of the odd-ball willy nilly spacings.