IE problems with nav bg color, column and other things

HTML & CSS
1

I am having some CSS issues with this site: http://www.charlotteswebservices.com/temp/http-blipstudio/index.html.

In IE8 (no other browser):

  1. The nav bg color is not going all the way to the right.
  2. The left column is thinner than it should be
  3. The nav links are too close together
  4. There is no space between top of page and top of box
    (view all these things in any other browser of course to see what it should look like)

Not an IE issue:

  1. Everytime I increase the line-height on the top left link portion in header, it adds a white space between header bg and nav bar bg.
  2. Not sure how to get rid of this at the top of the page: <%@LANGUAGE=“JAVASCRIPT” CODEPAGE=“65001”%> .

Thanks so much in advance!

2

Paul, thanks for checking. I don’t know what’s going on with the CSS and the server/host.

Ryan, I did try yours. The CSS file on the server of the host this person is using is acting crazy so it’s hard to tell what’s working and what’s not for 2-24 hours. I needed to make the div wider anyway. I’ll try your solution too.

Thank you both…

3

Not sure how to get rid of this at the top of the page: <%@LANGUAGE=“JAVASCRIPT” CODEPAGE=“65001”%> .

That’s probably causing most of your issues :slight_smile:

4

Not sure how to get rid of this at the top of the page: <%@LANGUAGE=“JAVASCRIPT” CODEPAGE=“65001”%> .

That’s probably causing most of your issues :slight_smile:

5

So good I said it twice :slight_smile: (Sitepoint is weird today)

6

Thanks Paul. So how do I remove it?

7

Found it and removed it. It did take care of most of the problems except:

The top left nav – any idea how I can add line-height w/o messing up header and everything underneath?
The line underneath the blockquote – any idea how to make it right-aligned? text-align:right using span not working.

Also, in IE 6, there’s a huge gap between everything on the right side. Between the header and the right side, the nav and the right side, all the way down through the footer.

8
9

I can’t see any images on the navbar?

10

Not sure how you want it to look but you haven’t accounted for the default margins and padding of the ul.


#headernav ul   {
    list-style-type: none;
 [B]   margin:0 0 0 15px;[/B]
 [B]   padding:0[/B]
}
#headernav ul li   {
    font-size: 10px;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
[B]    line-height:2.5;[/B]

}
11

Woops…I was editing my message above while you were posting. Won’t do that again. The nav “words”/links are images b/c she used a font that isn’t on everyone’s machine. Removing the code actually took care of this.

Please reread :-).

12

That did. Can you explain what you meant by :

13

The blockquote is miles too wide and is killing IE6.

Try this:


blockquote {
 color: #000;
[B] /*width: 45em;*/[/B]
 padding-left:20px;
 padding-top: 50px;
 padding-right:20px;
 padding-bottom:20px;
[B]/* float: left;*/[/B]
 font-size:75&#37;;
 font-style:italic;
 line-height: 25px;
[B] margin:0;[/B]
 }
14

The ul had top and bottom margin in Firefox but only bottom margin in ie. It had left margin in some browsers and left padding in others by default. You have to set margin and padding to zero and then just set what you need exactly.

The left margin/padding is what the browsers uses for the default bullet space but is not the same cross browser and you end up with a large space in one if you don’t fix it for all.

15

Like this:


    <blockquote>
        <div>“Breah Livolsi Parker is the best!! I can always count on her for fresh, well-thought out creative approaches. Not only are her concepts well executed, she gets the most important part — that creative work of any kind must elicit an emotional response. When you need an art director that thinks, she's the one to pick.” <cite> – Michael Ashmore, owner, Shepherd Design</cite></div>
    </blockquote>




#mainContent cite {
    display:block;
    text-align:right;
}
16

And just these two things:

The line underneath the blockquote – any idea how to make it right-aligned? text-align:right using span not working.

Also, in IE 6, there’s a huge gap on the right side. Between the header and the right side, the nav and the right side, all the way down through the footer.

17

Already fixed those in my above posts :slight_smile:

18

Thanks Paul. The first word of the first header in the maincontent kept creeping up to top right so I increased the width. Not a good solution…

19

I didn’t see any creep :slight_smile:

The text should only rise up if you have something floated and then all you need do is clear it.

Don’t use empty p tags to make space and don’t do things like this:


 <p class="bold"> Tips When Thinking About Your Logo</p>

That’s a heading so use a heading element instead and that means you can target it precisely and add margins as required. (Time to go - back tomorrow)

20

Good call. Simple oversight!