Fixing this error in css

busman posted this at 13:59 — 3rd June 2009.

Joined: Dec 2008

I have written some css and it works fine for the first 4 lines. After this the line seems to go out of place and I cannot seem to find the error. Please could you look at this image and tell me where I might be going wrong.

Thanks

Attachment	Size
css.error_.jpg	748.47 KB

greg posted this at 14:05 — 3rd June 2009.

He has: 1,581 posts

Joined: Nov 2005

We really cannot tell by an image only.
Can you give a link to the site, or post the CSS/HTML or upload them in a file?

I can give a few "guesses" towards what it might be, but without seeing the code they are only guesses.
Broken HTML or CSS., such as missing semi-colon on some css, incorrect div ID or Class, missing end tag like </div>

If it's a markup issue, missing end tag, etc, then validating the code in W3C's validator is likely to point out the issue. You can do it by pasting code too, if the site is not online.

Looking at the image, my best "guess" is something to do with FLOATS (it appears you use them and not a table). I.E. not cleared in the correct place, cleared too many times, not floated correctly..etc.

busman posted this at 14:44 — 3rd June 2009.

They have: 20 posts

Joined: Dec 2008

http://www.test.scenicgroup.co.uk/accessories.htm

The Html:
In a fast-changing market where new products are evolving all the time, our job is to research, analyse, test - and bring the very best to you.

PASSENGERVEHICLES

COMMERCIALVEHICLES

Vehicle Security
Vehicle Security
Parking Sensors
Parking Sensors
Phone Kits
Pipe Carriers
Vehicle Tracking
Light Bars/Beacons
In Car Entertainment
Reversing Alarms/Cameras
Satellite Navigation
Window Grilles
Car Audio
Roof Baskets
iPod Adaptors
Battery Management
MP3 Systems
Ply Lining
Radar Detectors
Vehicle Racking
Tow Bars
Tow Bars
Fleet Management
Fleet Management
Central Door Locking
Slam Locks
Electric Windows
Phone Kit
Reversing Cameras
Ladder Rollers
Dual Controls
Van Bulkheads

The css:
.yellow-title-box {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #F9C828;
height: auto;
width: 300px;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.text-body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
height: auto;
width: 300px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.yellow-access-title-box {
height: 40px;
width: 300px;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
}
.yellow-text {
float: left;
height: 35px;
width: 120px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 700;
color: #F9C828;
text-align: center;
}
.spacer1 {
float: left;
height: 35px;
width: 60px;
}
.button-access-links {
height: 18px;
width: 160px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 500;
color: #FFFFFF;
text-align: center;
padding-top: 3px;
float: left;
margin-left: 6px;
margin-top: 3px;
}
#access-container {
height: auto;
width: 340px;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
}
#accessories-box {
height: auto;
width: 340px;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
}

I hope this will do for future references. Thank you for you assistance.

Cheers

Megan posted this at 14:48 — 3rd June 2009.

She has: 11,421 posts

Joined: Jun 1999

Which browsers is this happening in? it looks fine to me in Firefox, Opera, and IE6. Or did you fix it?

greg posted this at 14:59 — 3rd June 2009.

He has: 1,581 posts

Joined: Nov 2005

Looks fine in my Firefox too, although looking back at your original image, the one that was a problem is now on the left side and not the right.

Also, the navigation link (Accessories) is not aligned in my browser. It's 2px too high, A top padding of 2px on the TD resolved it (tested only in FF Ubuntu)