Text Justifying Differently In Ie 6 And Firefox

**webgyrl** · January 16, 2005

Hi again gang :pissed:

I'm tweaking a design for one of the sites I maintain and decided to make a Dreamweaver Template to re-create the site because we are adding in new features and a whole ton of new pages. In order to speed up future changes, I decided to go with a template and the re-populate the site using pages created via the template.

To take a look at my test page (use IE and Firefox):

http://www.indiemanagers.com/IMA_NEW/test.htm

I decided to make a new CSS style sheet to style the text, background and the background color of the tables and have run into a couple of snags:

1.) The text in IE 6 is showing up "Centered" and the text in Firefox is showing up as it should "Left Justified".

Does anyone know why this might happen?

2.) The Java Script menus that I created in Fireworks all look strange now. I wonder if the CSS is affecting how the menus look? Does this happen when you apply CSS to a whole site? How would I fix that? Please see image posted to see what the Menus should actually look like.

3.) My scrollbar styling isn't working in IE. Not sure why that is. View the CSS sheet to check out how it is supposed to look.

Is the following possible?:

I want the Site Credits text in the very bottom table to be 11px and Centered. How can I do this using my global style sheet? I can't figure out if I will just have to manually center the text and change the size in Dreamweaver or if this seperate "style within a style" can be done using my style sheet. BTW I am using TopStyle Pro to do my style sheets... sorry still learning all this CSS and not a hard core hand coder :no2:

If you want to see my style sheet the link is:

http://www.indiemanagers.com/IMA_NEW/styles/main.css

Thanks for any insight you can provide to help me get rid of these buggies!

**TCH-Dick** · January 16, 2005

I'm not sure about the menu, but the other two are easy to fix. You already have CSS ids assigned so just add the following to your CSS.

>#header_and_text {
text-align:left;
}
#footer {
font-size:11px;
text-align:center;
}

**btrfld** · January 16, 2005

Hi Nat.

I think the centering issue has to do with inheritance. The table containing the text is inside a 'centered' column of a parent table. IE passes down the alignment to the child (incorrectly) and Firefox doesn't. As Dick says, you can style the inner table to correct the problem.

**webgyrl** · January 16, 2005

I'm not sure about the menu, but the other two are easy to fix. You already have CSS ids assigned so just add the following to your CSS.
>#header_and_text {
text-align:left;
}
#footer {
font-size:11px;
text-align:center;
}

Hi Dick,

Thanks so much for that bit of code.

One question: how does the code know where my header and footer are?

I was trying to look up info about headers and footers, but I am really confused. I didn't even know you could assign something to be a header or a footer. This would really help me out if I could figure it out. Right now I have the "headers" stuff in tables and same for the "footers". But they aren't 'real' headers and footers.

And the other thing that is important is that I am making this file into a Dreamweaver Template. Not sure if that matters tho?

Hope that made sense! LOL

Where in this CSS file would it best go?:

>BODY {
color: White;
background-color: #663333;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
scrollbar-face-color: #663333;
scrollbar-3dlight-color: #993366;
scrollbar-arrow-color: Black;
scrollbar-track-color: #663333;
scrollbar-shadow-color: #663333;
scrollbar-highlight-color: #cc9999;
scrollbar-darkshadow-color: #cc9999;
scrollbar-base-color: Black;
background-image: url(../layout/scanline2.gif);
}

table {
background-color: #663333;
}

h2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
color: #cc9999;
}

h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
color: #CC9999;
}

A {
color: Silver;
}

A:HOVER {
color: White;
}

**webgyrl** · January 16, 2005

Hi Nat.

I think the centering issue has to do with inheritance. The table containing the text is inside a 'centered' column of a parent table. IE passes down the alignment to the child (incorrectly) and Firefox doesn't. As Dick says, you can style the inner table to correct the problem.

<{POST_SNAPBACK}>

Ah, you know I was thinking that might be it. But I really wasn't sure how to fix it since I want these main tables centered.

Hopefully styling the inner table will help.

BTW I am going over your email with Jeremy today and will reply ASAP.

Thanks guys. I really learn so much from all this trial and error and having some guideance helps so much!

**Deverill** · January 16, 2005

One question: how does the code know where my header and footer are?

</quote]

Hey Nat!

The lines with id="whatever" tell the CSS which section it is. In your case you have
>     <table width="90%" height="0" border="0" cellpadding="0" cellspacing="0" id="footer">
and
><table width="90%" height="0" border="0" cellpadding="0" cellspacing="0" id="header_and_text">
It doesn't even have to be a header or footer, it's just a named section so think of it that way. You could also use
><div id="centerbottom">the text at the bottom of your page</div>
and then in your CSS you could set up
>#centerbottom { 
font:whatever; 
fontsize:whatever;}
Hope it helps!

**webgyrl** · January 17, 2005

Jim!

Yes that totally helps me. Thanks so much for explaining it.

So basically, I can put those lines of code anywhere in the CSS file and it will be fine.

Cool!

**webgyrl** · January 17, 2005

Now... anyone have any idea why my Scrollbar CSS and the Java Script menus are not working?

FYI The linking method I have for my Global Style Sheet is as follows:

><link rel="stylesheet" type="text/css" media="screen" href="http://www.indiemanagers.com/IMA_NEW/styles/main.css" />

I know that IE 6 has that JS warning, but I did 'allow' the JS to run. It is not showing up right at all.

BTW that SP 2 feature is a real pain in the I AM A SPAMMER. Is there a way to create a navigation bar with dropdown menus that doesn't require Java Script?

**webgyrl** · January 17, 2005

BTW Dick that did the trick.... cool!

**btrfld** · January 17, 2005

There is a way to create dropdown menus using almost no javascript. It uses nested unordered lists and css. The only javascript it requires is a function to kick IE in the butt. You can see an example at http://www.wegerarchitects.com/index2.html.

There are a bunch of examples of these menus out there. Google 'css menu' and you'll find several. My page was based on one of them; can't exactly remember which one.

**webgyrl** · January 17, 2005

OK Jim, thank so much for that link.

I finally did get the menus to work fine. Just made them HTML instead of Graphic.

But I am going to look into the non JS menus.

Still can't figure out why the scrollbar isn't working. I wonder if it is because I have it in the BODY CSS?

I think maybe it is supposed to go in the HEAD.

>BODY {
color: White;
background-color: #663333;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
scrollbar-face-color: #663333;
scrollbar-3dlight-color: #993366;
scrollbar-arrow-color: Black;
scrollbar-track-color: #663333;
scrollbar-shadow-color: #663333;
scrollbar-highlight-color: #cc9999;
scrollbar-darkshadow-color: #cc9999;
scrollbar-base-color: Black;
background-image: url(../layout/scanline2.gif);
}

Not sure, still fiddling.

My eyes are going square...

**btrfld** · January 17, 2005

Well, it seems you've been coding in the middle of the night for a few days now. Sleep, maybe?

**webgyrl** · January 17, 2005

Well, it seems you've been coding in the middle of the night for a few days now. Sleep, maybe?

<{POST_SNAPBACK}>

Yah, probably! LOL :eek:

**webgyrl** · January 17, 2005

Hmmm from all I am reading the scrollbar styling is in the right place and because the link to the CSS style sheet is in the <head> it should work correctly.

I wonder if the scrollbar styling not showing is a result of making my page XHTML compliant?

Any guesses?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

**LisaJill** · January 17, 2005

Try using html { instead of body { for the scrollbar. body { works with HTML 4.01; xHTML transitional requires html {.

**webgyrl** · January 17, 2005

Try using html { instead of body { for the scrollbar. body { works with HTML 4.01; xHTML transitional requires html {.

<{POST_SNAPBACK}>

Worked like a charm, :eek:

Now, is there somewhere that explains why that rule is? Why does xHTML transitional require html { ? I'd love to read up more on that in case I run into some other problem by making all my pages xHTML compiant.

Thanks Lisa!

Sign In

Text Justifying Differently In Ie 6 And Firefox

Recommended Posts

webgyrl

TCH-Dick

btrfld

webgyrl

webgyrl

Deverill

webgyrl

webgyrl

webgyrl

btrfld

webgyrl

btrfld

webgyrl

webgyrl

LisaJill

webgyrl

Join the conversation

Hosting