PDA

View Full Version : Header not extending right and form help



n5tkn
Apr 9th, 2007, 03:54 AM
at http://mattknows.com, I've got a problem on the photos page. In Safari, the headers don't extend all the way across the photo and description like they should. They do in FF Mac and Win, and IE7. Any ideas why? Also, Safari is buggering my form on contact page too, and ....aww crap. Its not looking right on FF Win now either. Any clean up suggestions?

koyama
Apr 9th, 2007, 05:46 PM
Any clean up suggestions?
It's not looking right in IE6 either. Here the main content is pushed down by around 200px. The problem in Safari may be a minor one compared to this.

Suggestion (OT): Remember that the body element usually has default margins applied in various browsers. Normally you will want to explicitly set the margin to zero:


body {
margin: 0;
}

Then you no longer need your negative top margin for your banner (which anyway only brings it to the top in one browser)


.logo {
position: absolute;
left: -5px;
}
#banner {
width: 600px;
position: relative;
height: 200px;
margin-top: -10px;
}


<div id="banner">
<img src="images/mattknows-mainlogo.jpg" class="logo">
</div>

In this case I wouldn't use absolute positioning either for your main logo. Instead give it width and height attributes and remove the height for your #banner. Let things flow naturally whenever possible.

Also, you need an alt attribute for your image: Guidelines on alt texts in img elements (http://www.cs.tut.fi/~jkorpela/html/alt.html)