16 replies [Last post]
coleenh
coleenh's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-6
Joined: 2009-09-02
Posts: 26
Points: 25

I'm not a complete beginner, but need some help with a few things. First, I have my background color set and my header image. The Header image falls just shy of stretching 100% across the page, even though I have it set to 100%. In Firefox and Chrome, if you scroll the tiny bit to the right, you will see the yellow background on the side. However, it looks fine in IE7! Why would it put a tiny bit of the background (like 5pixels maybe) hanging over on the right? Any help would be greatly appreciated.

Here's a link and here's my code:

http://www.wedevelopwebs.com/CorozalToday/

<div id="header">
        <img src="images/header.jpg" alt="Corozal Today" width="100%" height="200px"/>
        <p class="shadow" title="Corozal Today"><span>Corozal Today</span></p>
</div>

body
{
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    background: #F7F56A;
    min-width: 600px;
    font-family: Arial, Verdana, Tahoma,sans-serif;
    font-size: 1em;
}
/* Header and logo placement and shadowing */ 
#header
{
    position: relative;
    top: 0px; 
    background-repeat: no-repeat;
    width: 100%;
} 
.shadow
{
    position: absolute;
    display: block;
    float:right;
    font-family: Papyrus;
    font-size: 3em;
    color: #ffffff;
    top: 40px;
    right:0px;
    width: 420px;
}
.shadow span 
{ 
    position:absolute; 
    display:block; 
    top:4px;  
}
.shadow:before 
{ 
    display:block; 
    padding:2px; 
    content: attr(title); 
    color:#666;  
    font-family: Papyrus;
    width: 420px;
    right:1px;
}
/* Top Navigation menus*/ 
#topnav
{
    position: relative;
    top: -4em;
    font-family: Tahoma, Arial, Verdana, sans-serif;
    font-weight: bolder;
    font-size: 11pt;
    color: #ffffff;
    left: -50px;
    font-style: italic;
}
#topnav ul
{
	list-style: none;
}
#topnav li
{
    float: left;
    height: 20px;
    text-align:center;
}
#topnav li a:hover
{
    float: left;
    height: 20px;
    color: #C0C0C0;
    padding: 1px 1px 1px 1px;
    width: 120px;
}
#topnav li a
{
    text-decoration: none;
    list-style-type:none;
    color:#ffffff;
    float:left;
    height:20px;
    margin: 0px;
    width:120px;
}
#topnav li a:visited
{
    text-decoration: none;
    list-style-type: none;
    color: #CCCCCC;
}
#topnav li.Home a:hover, #topnav li.Photos a:hover, 
#topnav li.About a:hover, #topnav li.Archives a:hover, 
#topnav li.Contact a:hover 
{
    float:left;
    color:#ffffff;
    height:20px;
    margin: 0px;
    padding:1px 1px 1px 1px;
    width:120px;
}
 
#topnav li.Home, #topnav li.Services, #topnav li.Products,
#topnav li.About, #topnav li.Contact
{
    float:left;
    height:20px;
    color: #ffffff; 
    margin: 0px;
    padding:1px 1px 1px 1px;
    width:120px;
}

Coleen

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It's because of the width on

It's because of the width on .shadow. By the way, that header image looks awful stretched out on a large monitor.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

coleenh
coleenh's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-6
Joined: 2009-09-02
Posts: 26
Points: 25

Thanks so much! Sorry for the

Thanks so much! Sorry for the delay in responding - I live in Belize and our Internet was down for almost 2 days! It just came back up (and is still very flaky!) It works great - except in IE! Removing the width fixes it in Firefox and Chrome, but completely screws up the IE7 display...
So here is that section of CSS rewritten and it works perfectly in Firefox & Chrome, but of course, IE does not play nice!

http://www.wedevelopwebs.com/corozaltoday/default.aspx

.shadow
{
    position: absolute;
    display: block;
    float:right;
    font-family: Papyrus;
    font-size: 3em;
    color: #ffffff;
    top: 40px;
    right:20px;
}    
.shadow span 
{ 
    position:absolute; 
    display:block; 
    top:4px;  
}
.shadow:before 
{ 
    display:block; 
    padding:2px; 
    content: attr(title); 
    color:#666;  
    font-family: Papyrus;
    right:1px;
}

Any help/advice you can give on it would be so greatly appreciated. Also, if you notice in Chrome - my roll-overs don't work. Why can't all browsers just play nice together with CSS? I haven't changed my Navigation CSS any - can you possibly see any reason why it doesn't work in Chrome? I'm puzzled, usually it's IE that malfunctions!

Thanks again,

Coleen

Coleen

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

The problems in IE might be

The problems in IE might be because it needs hasLayout to be triggered so you could try giving it a height or zoom:1.

Your anchor problems are probably due to having your pseudo-classes back to front. :hover has to come after :link and :visited. But really that whole section is way too verbose and should be rewritten as follows:

#topnav ul
{
	list-style: none;
}
#topnav li
{
    float: left;
    height: 20px;
    text-align:center;
    width: 120px;
}
#topnav li a
{
    text-decoration: none;
    color:#ffffff;
}
#topnav li a:visited
{
    color: #CCCCCC;
}
#topnav li a:hover
{
    color: #E8E8E8;
    padding: 1px;
}

And you don't really need classes on all the list items as you're not doing anything to any of them which is different from the others.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

coleenh
coleenh's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-6
Joined: 2009-09-02
Posts: 26
Points: 25

Thanks so much! Sorry for the

Thanks so much! Sorry for the delay in responding - I live in Belize and our Internet was down for almost 2 days! It just came back up (and is still very flaky!) It works great - except in IE! Removing the width fixes it in Firefox and Chrome, but completely screws up the IE7 display...
So here is that section of CSS rewritten and it works perfectly in Firefox & Chrome, but of course, IE does not play nice!

http://www.wedevelopwebs.com/corozaltoday/default.aspx

.shadow
{
    position: absolute;
    display: block;
    float:right;
    font-family: Papyrus;
    font-size: 3em;
    color: #ffffff;
    top: 40px;
    right:20px;
}    
.shadow span 
{ 
    position:absolute; 
    display:block; 
    top:4px;  
}
.shadow:before 
{ 
    display:block; 
    padding:2px; 
    content: attr(title); 
    color:#666;  
    font-family: Papyrus;
    right:1px;
}

Any help/advice you can give on it would be so greatly appreciated. Also, if you notice in Chrome - my roll-overs don't work. Why can't all browsers just play nice together with CSS? I haven't changed my Navigation CSS any - can you possibly see any reason why it doesn't work in Chrome? I'm puzzled, usually it's IE that malfunctions!

Thanks again,

Coleen

Coleen

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Why have you just reposted

Why have you just reposted your previous comment after I'd already responded to it? Puzzled

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

coleenh
coleenh's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-6
Joined: 2009-09-02
Posts: 26
Points: 25

You're the best Tyssen, thank

You're the best Tyssen, thank you! That solved my problem with the roll-over's and I am working on fixing the problem in IE. I do have a question though...

Since according to the MS article has layout property using the doctype strict:

As of Microsoft Internet Explorer 6, when the !DOCTYPE declaration specifies strict standards compliance, inline elements ignore the width property and the height property. By setting the width property and the height property, you cannot cause the element to have layout.

Should I revert back to the default doctype that .net sets in each page to avoid this, or will it cause problems with the other browsers to do that? (note to self...I really HATE Microsoft!)

I'm still reading up on this - thanks so much for the links and advice - I can't tell you how much I appreciate it! You don't know how much you don't know about something until you start to really use it...I guess I am still a beginner!

Coleen

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

coleenh wrote: Should I

coleenh wrote:

Should I revert back to the default doctype that .net sets in each page to avoid this, or will it cause problems with the other browsers to do that? (note to self...I really HATE Microsoft!)

Which doctype was it? Is there any reason why the pages have to be done in .NET?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

coleenh
coleenh's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-6
Joined: 2009-09-02
Posts: 26
Points: 25

Why have you just reposted

Why have you just reposted your previous comment after I'd already responded to it?

I'm really sorry - as I said, we are having Internet connection issues and the only thing I can think of is that I hit the back button on my browser, it came up with my post, and asked if I wanted to re-send it...the connection is very flaky and I wasn't sure what was happening. I am sorry about the double post (blush)

Coleen

coleenh
coleenh's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-6
Joined: 2009-09-02
Posts: 26
Points: 25

This is the standard default

This is the standard default doctype from .net:

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

I'm using Visual Studio as my HTML editor, but also I do any code-behind in VB.net, so yes, I do need to develop in .net.

I did try to revert back to the default doctype, but it makes absolutely no difference what-so-ever.

Thanks.

Coleen

coleenh
coleenh's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-6
Joined: 2009-09-02
Posts: 26
Points: 25

One last question... I guess

One last question...

I guess I don't understand what the fix is. I've read completely through the hasLayout Property page and don't see what they are suggesting to do to fix the problem! Maybe I am misunderstanding it, but if I am reading it correctly, it shows that almost everything that I used in my CSS (width, height, float, position, etc.) will cause IE to have layout. So what do I do to fix it? I tried putting the styling for the header image into the style sheet, but it did not work!

#header
{
    position: relative;
    top: 0px; 
    background-repeat: no-repeat;
    width: 100%;
} 
#head_img
{
    height:200px;
}

<div id="header">
    <img src="images/header.jpg" alt="Corozal Today" id="head_img"/>
    <p class="shadow" title="Corozal Today"><span>Corozal Today</span></p>
</div>

(Sigh) Why oh why can't Microsoft conform to standards? Have I mentioned how much I dislike MS? Crazy Any info you can offer on how I can fix this in IE would be greatly appreciated.

Thanks!

Coleen

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

coleenh wrote: if I am

coleenh wrote:

if I am reading it correctly, it shows that almost everything that I used in my CSS (width, height, float, position, etc.) will cause IE to have layout.

Yes, that's what you want to do. I'm not 100% certain, but usually when something doesn't work in IE and it's OK in the others, it's due to IE need to have layout on an element. Adding a width causes a problem in other browsers, so you need to find another hasLayout trigger that won't do that which could be giving it a height or zoom:1 or min-height:0 (only works for IE7 and up).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

coleenh
coleenh's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-6
Joined: 2009-09-02
Posts: 26
Points: 25

I'm really sorry, I guess I

I'm really sorry, I guess I don't understand. Are you saying that I need to add another element to the code to make it have layout in IE? So if I add say, min-height:0 to my CSS - that could fix it? Let me try that...

Doesn't work. I'll try a few others and see what happens. What I am really puzzled about is the way that it now is pushing the text to the right, like it is putting the float outside the header section. I guess maybe I don't understand floats well enough - I removed the float from the CSS and it made no difference. Here is the current CSS:

/* Header and logo placement and shadowing */ 
#header
{
    position: relative;
    top: 0px; 
    background-repeat: no-repeat;
    width: 100%;
    height:200px;
    min-height:0;
} 
#head_img
{
    height:200px;
    width: 100%;
}
.shadow
{
    position: absolute;
    display: block;
    font-family: Papyrus;
    font-size: 3em;
    color: #ffffff;
    top: 40px;
    right:20px;
}    
.shadow span 
{ 
    position:absolute; 
    display:block; 
    top:4px;  
}
.shadow:before 
{ 
    display:block; 
    padding:2px; 
    content: attr(title); 
    color:#666;  
    font-family: Papyrus;
    right:20px;
}

I am VERY puzzled by this! Thanks for any and all of the help you've given, it is very appreciated.

Coleen

coleenh
coleenh's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-6
Joined: 2009-09-02
Posts: 26
Points: 25

Well it all boils down to how

Well it all boils down to how @#$%! IE handles absolute positioning and Display blocks. I got the background (yellow behind the image) to clear in IE AND was able to fix the "Shadow" by removing everything and adding back the code 1 line at a time. I tested it in IE and then either moved forward or fixed each element until it looks correct in IE. I checked Firefox and Chrome as I went, and although I prefer developing using Firefox as my "test" browser, it looks like I have to develop for IE and just make sure it looks okay in the other two as I go. I ended up completely removing the span in my HTML and just over-laying two sections of text with top and right positioning slightly off-set. Hey - it works!

Nothing is ever easy...

/* Header and logo placement and shadowing */ 
#header
{
    position: relative;
    top: 0px;
    background-repeat: no-repeat;
} 
.head_img
{
    height:200px;
    width: 100%;
}    
.logo
{
    position: absolute;
    display: block;
    font-family: Papyrus;
    font-size: 3em;
    font-weight:bold;
    color: #ffffff;
    top: 70px;
    right:20px;   
}   
.shadow
{
    position: absolute;
    color: #808080;
    top: 68px;
    right:23px;
    font-family: Papyrus;
    font-size: 3em;
    font-weight:bold;
}
 
<div id="header">
   <img src="images/header.jpg" alt="Corozal Today" class="head_img"/>
   <p class="shadow">Corozal Today</p>
   <p class="logo">Corozal Today</p>
</div>

Thanks for all of your help Tyssen, I really appreciate it!

Coleen

coleenh
coleenh's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-6
Joined: 2009-09-02
Posts: 26
Points: 25

Now the menus don't work!

Ugh! Fix one problem, break something else! Okay, after making the changes to the head image file, for some reason my menus disappeared. I was able to "Fix" them so they show up on the screens, but now, they only work in IE! Argh! Okay, here's the CSS for the Navigation (and I did use what you sent me Tyssen, and it worked until I "Fixed" the rest of the problems!) Why does this work in IE but not in Firefox or Chrome? Here's the updated link too.

http://www.wedevelopwebs.com/corozaltoday/default.aspx

/* Header and logo placement and shadowing */ 
#header
{
    position: relative;
    background-repeat: no-repeat;
} 
.head_img
{
    height: 225px;
    border-style: none none solid none;
    border-width: 0pt 0pt 2pt 0pt;
    border-color: #000080;
    width: 100%;
    z-index: -1;
} 
/* Top Navigation menus*/
#topnav
{
    position: absolute;
    top:170px;
    font-family: Tahoma, Arial, Verdana, sans-serif;
    font-weight: 800;
    font-size: 11pt;
    color: #ffffff;
    left: -50px;
    font-style: italic; 
}
#topnav ul
{
	list-style: none;
}
#topnav li
{
    float: left;
    height: 20px;
    text-align:center;
    width: 120px;
}
#topnav li a
{
    text-decoration: none;
    color:#ffffff;
}
#topnav li a:visited
{
    color: #CCCCCC;
}
#topnav li a:hover
{
    color: #E8E8E8;
    padding: 1px;
}

The "Shadow" CSS has not changed at all. Any suggestions? Is it because it is too far down on from the top that it isn't working? Why on earth would it work in IE and not in Firefox? Ugh! I am so confused and frustrated with this now! Any help would be very greatly appreciated.

Coleen

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I can see the menu in Safari

I can see the menu in Safari and Firefox so I'm not sure what the exactly problem is (I'm on a Mac so haven't checked in IE).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

coleenh
coleenh's picture
Offline
Regular
Last seen: 11 years 45 weeks ago
Timezone: GMT-6
Joined: 2009-09-02
Posts: 26
Points: 25

Never mind...It was the

Never mind...It was the positioning of the navigation too close to the bottom of the image element. I moved the menus up and now it works. I don't like how it looks in IE, but - at least it works and it's not too bad. Have I mentioned how much I dislike IE? <sigh> Oh well, at least it works. Thanks again for all of your help.

Coleen