GANTdesigns: Distorted Images [CSS]

Hello,

This has been a constant burden every since I have released my website, http://www.GANTdesigns.com. I have asked various people in different designing forums, but they still can't seem to fix the problem. Is it possible if someone can try to make GANTdesigns CSS validate? Becauase, it's very hard for me and for others.

-- It's basically the navigation and tool bars.

-- Update: Here are the most updated/error free css that I have in my database (not uploaded). They are just full of warnings, but no errors: http://www.gantdesigns.com/css

Here is the preview with Safari test:

http://87.3.220.151/safaritest/1153981001-full.jpg

http://87.3.220.151/safaritest/1153981123-full.jpg

http://87.3.220.151/safaritest/1153981178-full.jpg

Hopefully, there are some keen Safari based CSS coders here.

Thanks.

#406817

I'm not seeing any of that in Firefox and the warnings in your CSS are really no real problem at all. Just a default fallback...

• Line : 16 (Level : 1) You have no background-color with your color : #gantnav a#homea
  
• Line : 17 (Level : 1) You have no background-color with your color : #gantnav a#abouta
  
• Line : 18 (Level : 1) You have no background-color with your color : #gantnav a#stylesa
  
• Line : 19 (Level : 1) You have no background-color with your color : #gantnav a#faqa
  
• Line : 20 (Level : 1) You have no background-color with your color : #gantnav a#creditsa
  
• Line : 21 (Level : 1) You have no background-color with your color : #gantnav a#forumsa
  
• Line : 22 (Level : 1) You have no background-color with your color : #gantnav a#contacta
  

Those could be fixed by simply doing:

#gantnav a#homea {[LIST]
[*]display : block;
[*]width : 156px;
[*]height : 0;
[*]padding : 70px 0 0;
[*]color : #000;
[*]background-color: #FFF;
[*]border : none;
[*]overflow : hidden;[/LIST]
}

Or something similiar (you're not supposed to define a background color without also defining a color, and vice versa.

And THIS

# Line : 26 (Level : 2) Redefinition of height : * html #gantnav a:link

# Line : 26 (Level : 2) Redefinition of height : * html #gantnav a:visited

# Line : 48 (Level : 2) Redefinition of height : * html #gantnav a:hover

Is just:

* html #gantnav a:link, * html #gantnav a:visited {[LIST]
[*]height : 68px;
[*]height : 0;[/LIST]
}

* html #gantnav a:hover {[LIST]
[*]height : 68px;
[*]height : 0;[/LIST]
}

You defined the height twice there...and I'm not sure why. That might be what you're problem is though, because that also seems to be the same place the problem is...the link over things. Not sure how the HEIGHT would do that, though.

But again...I'm seeing no problems in Firefox.

#406963

sgtrama

FYI: I did not create the website. I am the only one who is maintaining the website. I am very basic when it comes to CSS. If you are willing to help me clear this thing out, I will definately give you credit in GANTdesigns.

I replaced them, it still looks the same. Not only that, but I also deleted the * html part, to see if it would actually fix the image displacement, but no change occured.

#406973