• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

Calling all HTML, CSS experts ---WTF is wrong with my CSS?

adlep

adlep

Diamond Member
It is stragne because right now, my web site looks OK in Mozilla and Konqueror, but the header part of my web site
kind of craps out in Internet Explorer, it looks like the picture of the computer in the header, gets extra 10 px of padding by IE?
But why?
Help...
site
Once again, it looks just ok whith Mozilla and Konqueror??

Fragment of my CSS

#Header {
margin:0px 0px 20px 0px;
padding:0px 0px 0px 0px;
height:44px;
border-style:solid;
border-color:black;
border-width:0px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:0px; /*11px*/
background: url(images/texture.gif);
voice-family: "\"}\"";
voice-family:inherit;
height:44px; /* the correct height */
}
body>#Header {height:44px;} /* 44px is the height of the picture */

What should I do to correct the problem and make the "header" look good again in IE?
 
I only have IE in this machine, but could you do screenshots of it in K and M so i can make out what you're talking about?

 
Netscape and IE both handle CSS differently.

So most sites usually have 2 css files, 1 for IE and 1 for Netscape. You use code to detect which browser the person has and load the appropriate css file. Then you would just need to tweak the IE file so it looks correct.

This is how it is set up on one of my sites, this belongs in the <head> section:

<link rel="stylesheet" href="css/netscape.css" type="text/css">
<style type="text/css">
<!--
@import url(css/ie.css);
-->
</style>
 
Originally posted by: BingBongWongFooey
Originally posted by: rootaxs
Enclose the header in a table. That should keep things uniform 🙂
Click to expand...

Tables are for DATA, not layout!!

See here for the explanation and one possible solution to your problem.
Click to expand...

Perhaps, but it is a simple solution nevertheless. KISS.

 
Here's how to fix your page:

Validate your html. It's nice that you picked a strict doctype, but it doesn't help when you don't bother to fix the syntax problems. Click on the link below and you'll see what's wrong with your page.

Validation results for your web page

Once you decide to fix these problems, you'll notice 2 good things...
[*]Your code will be a lot smaller and faster for users to download.
[*]Your code will be much easier to read.

You might be wondering afterwards,

"What happened to all my pretty font colors, font sizes, centering, etc? It looks worse than before."

The answer is that you're right. It does look worse. But the reason is because you haven't really been using the full capabilities of CSS. Instead, you have been using messed up HTML and have been trying to fix those problems by using CSS as a bandage. This is the wrong way to design. You have to remember that good CSS can only come from writing good HTML.

After you properly fix to your HTML, please let me or others here know what you've done so that we can show you the next steps in writing more powerful, streamlined, and browser-compatible CSS.

But of course, if you just want to add another quick bandage to your underlying problems, throw some table code in there.
rolleye.gif
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top