help with css in Firefox please (Full Version)

All Forums >> [Web Development] >> General Web Development



Message

GolfMad -> help with css in Firefox please (3/13/2007 13:26:05)

http://www.davidwyoung.co.uk/profile.asp (site in development)

In IE7 the top left header table cell appears fine, with the css styling I
have made but in Firefox the background image has disappeared and the text
has lost its styling.
I apologise that I am fighting a losing battle in jumping straight to
tableless css - the gap is too big, but I am trying to learn a bit each time
as I go along.

Also, lower down there is a box headed 'Frame Green', fine in IE but it
overlaps the lower picture in Firefox and has a large blank space at top.

I would be very grateful if anyone can help me please.

Regards
Phil



Tailslide -> RE: help with css in Firefox please (3/13/2007 14:14:45)

Hi

Add the background image into the headerinc rule: 
.headerincl {
	border-style: none;
	width: 780px;
	background-color: #FFFBFF;
background-image: url('images/header-bg-vr_01_01.jpg');
}


Also remove the top margin from the H5 in the box: 

h5 {margin-top:0}

You'll be closer now - you'll just need to tweak padding and margins.

It has been mentioned before on here but it's usually best to reset all padding and margins to zero at the start of your stylesheet - and then add them back in as required. Reason being that various different browsers have various different standard margins around elements which can really mess you up if you're not careful.

There are cleverer variations on the theme but at the most basic you're looking at: 
html, body {margin:0; padding:0}



GolfMad -> RE: help with css in Firefox please (3/13/2007 15:15:20)

Thanks very much Tailslide.

The h5 margin reduction part worked, in that it reduced the gap at the top but there is now a gap underneath the 'Frame Green' that I removed in IE by making style25 (which positions the text in that box) margin-top:-15px to stop a gap between the text and header ' Frame Green' but perhaps this has had the bad effect in Firefox?

The missing css form the top left header - I have found now was down to the dwy.css starting with an erroneous "}" tag. Although IE ignored it , Firefox read it and stopped the first style after that bracket showing.

Your help is much appreciated.

Regards
Phil




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875