Strict Vs Transitional - Problems in Firefox !!

Discussion in 'CSS' started by slimboyfatz32, Feb 18, 2008.

  1. #1
    Hi ,

    I have recently adapted a design with XHTML/CSS , the original was 'transitional' Doctype and was fine in Firefox , now changing to 'strict' has added extra padding above my navigation when viewed in Firefox ... i have played with the stylesheet , but have drawn a blank .. the test site can be seen here ....

    http://www.firstbasedesign.co.uk/choc_test.html


    help greatly appreciated .
     
    slimboyfatz32, Feb 18, 2008 IP
  2. Maujor

    Maujor Peon

    Messages:
    30
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try
    #header img {
    	display:block;
    	}
    Code (markup):
     
    Maujor, Feb 18, 2008 IP
  3. slimboyfatz32

    slimboyfatz32 Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    worked a treat , thank you !!!
     
    slimboyfatz32, Feb 18, 2008 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    kk5st, Feb 18, 2008 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    It's a presentational image in the first place - IMHO you shouldn't even be using the IMG tag in the first place, but a H1 or DIV with an image replacement technique so you have the actual TEXT of that image in the page as... you guessed it, actual text.

    If for no other reason than so that search engines and people browsing with images off have something to look at.

    I would also ease up on the DIV's and classes - the following based on your current appearance are completely unneccessary and a waste of code: #header, #mainContainer, #nav, #navInner, #padding, #innerNews

    All of those should be easily axed since they aren't doing anything that cannot be applied to the other existing div, classes and tags.

    ... and you've got multiple H1's, which is generally considered bad semantics - whcih is why I'd make that logo a H1 with text inside it (hidden under the image if need be) and downgrade all your other headers one level. Headers should fan out like a tree - you've got more than one trunk on your tree.
     
    deathshadow, Feb 19, 2008 IP