The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Browser Woes with Image Menus
Faltzer
post Sep 20 2008, 05:01 PM
Post #1


Newbie
*

Group: Members
Posts: 12
Joined: 19-June 07
Member No.: 3,122



I'm pulling my hairs out attempting to diagnose 2 problems with my menus on my layout. The first one is that my menu does not show up very well in Opera if it's in 'Fit to Width' mode, which is a real sore for my menu since the majority of it is fixed-width, causing it to blow up whenever 'Fit to Width' is enabled.

The second issue is flexibility of positioning it. Fixed-width means that it'll look very different in other screen resolutions, and I don't want it to be the case. It's very hard to properly get the positioning on this to work with fixed-width, and using fluid-width (percentages, I believe) would only make the menu stop working....

If anybody can offer any solutions or ideas on these problems, then thank you. Also, before any of you tell me to validate my HTML and CSS in order to have this fixed, it won't work simply because my HTML is valid, and the CSS invalidity is irrelevant to my issues (opacity).


As for a link: http://faltzer.net/stuff/brandonevans/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 21 2008, 02:21 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,941
Joined: 9-August 06
Member No.: 6



It already isn't working in IE6. Also, most of it is outside the width of my screen. In fact, at first I didn't notice it was there and thought you referred to the red bar.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Sep 21 2008, 04:07 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You have used position: absolute in the menu div, which takes it out of the document flow.

Change the #menu and #menu ul rules to:
CODE
#menu {
    float: right;
    height: 81px;
}

#menu ul  {
    list-style: none;
    padding: 90px 0 0 0;
}

You then can get rid of the second #menu ul rule a little further down in your stylesheet.

That should make the menu more flexible; at least, so it does in Safari on Mac.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Faltzer
post Sep 21 2008, 12:22 PM
Post #4


Newbie
*

Group: Members
Posts: 12
Joined: 19-June 07
Member No.: 3,122



While it did properly position the menu, there is still a few problems. For one, the topbar (containing the blah blah blah) is not stretching along with the content after I set the width of it to 100%.. The rounded corners seem to have disappeared now too for some very odd reason. I inspected the widths, and I set each of them to 100%, but with no results thus far. IE7 or IE6 (I'm not entirely sure, since I had a friend test this out for me.. I have IE 8 right now.) also displays the menu on top of the rest of the layout, making the layout move down. I'd resort to IE conditionals, but it is usually a very bad idea to do that..

Second, in Opera, with the 'Fit to Width' mode activated, my menu unnecessarily displays the other parts of my hover-over images, which is a real major.

I mitigated
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Sep 22 2008, 04:05 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Ok, I fiddled a bit with your stylesheet and came up with the following changes.

CODE
#topbar-main {
    width: 100%;
    height: 41px;
}

#topbar {
    background: #6a1414 url('topbar.png') repeat-x left top; /*moved here from #topbar-main*/
    margin: 0 14px; /*giving the rounded corners images room on both sides*/
    color: #FFF;
    text-align: center;
}

#topbar-left{
    background: url('topbar-left.png') no-repeat left top;
}

#topbar-right {
    background: url('topbar-right.png') no-repeat right top;
}

Then, also get rid of the width: 100%; in the #content div, so it will fit in the wrapper div and align correctly with the menu on the right.

As for the "Fit to Width" mode of Opera, I have no idea. I don't have Opera and only can run IE6 or IE7 on a VM, which I only launch if I need to for work. Maybe it helps to set an overflow: hidden; to cover the hover-over images.

This post has been edited by Frederiek: Sep 22 2008, 04:11 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Faltzer
post Sep 28 2008, 04:53 PM
Post #6


Newbie
*

Group: Members
Posts: 12
Joined: 19-June 07
Member No.: 3,122



I was finally able to get this far, having to sort through a slew of other browser errors (Jesus Christ, why can't we just have one browser?), and the last one that stumps me is an IE error (I'm not sure which versions this applies to, as I have IE 8 right now. If anybody with IE 6 or 7 can check, then I'd appreciate it) that has the menu displayed to the top of the layout, moving the content and everything under it downwards. The menu also suffers from this, but I believe the fix to this problem also diagnoses the IE error. Does anybody have any clues?

Also, I want to thank those who have helped thus far.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd July 2018 - 03:35 PM