9 replies [Last post]
cade
cade's picture
User offline. Last seen 1 year 35 weeks ago. Offline
newbie
Timezone: GMT-4
Joined: 2010-08-27
Posts: 4
Points: 5

Hello! I've been working on a website and learning CSS as I go along. The navigation bar was working fine until I decided to try and implement a drop down menu function. I've been struggling for a few days and I have a few questions!

The site in question is here: http://www.neuk.ca/cssconfusion/

1) In Firefox, when I roll over the drop down, the green selection highlight covers up the text, and if I move the cursor around, the selection grows and shrinks, as if there were a gap between the buttons. I'd like for the buttons to be immediately next to each other, highlight fully, and for the highlighted text to show. What part of my code is controlling all of this?

2) The drop down menu item bars highlight with green only half-way through. Separating the item bars, I have a white line, which also only goes as far as the green selection highlight and leaves the rest transparent. Why does this happen? I would like for the item bars to highlight fully and for the white line separating the bars to carry through full-length as well.

3) In IE, not only does the drop down menu not work at all, but the navigation bar is set to the left. I know there's a ton of compatibility issues between the different browsers, although I thought I had that covered with some javascript. How would I go about fixing it for IE?

The HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<script type="text/javascript"><!--//--><![CDATA[//><!--
 
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
 
//--><!]]></script>
  <head>
    <title>fffff</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
  </head>
  <body> 
    <div id="wrapper"> 
      <div id="bg"> 
        <div id="header"></div>  
        <div id="page"> 
          <div id="container"> 
            <!-- banner -->  
            <div id="banner"></div>  
            <!-- end banner -->  
            <!-- horizontal navigation -->  
            <div id="nav1"> 
              <ul>
 
                <li id="current" style="border:none"><a href="fff" shape="rect">Home</a>                </li>
                <li><a href="fffl" shape="rect">Dropdown</a><ul>
		<li><a href="#">Drop1</a></li>
		<li><a href="#">Drop2</a></li>
		</ul>				
				</li>
				<li><a href="fff" shape="rect">fffffff</a></li>
 
                <li><a href="fff" shape="rect">ffffffff</a></li>
                <li><a href="ff" shape="rect">fffffffff</a></li>
				<li><a href="fff" shape="rect">ffffffff </a></li>
              </ul>
            </div>  
            <!-- end horizontal navigation -->  
            <!--  content -->  
            <div id="content"> 
              <div id="center"> 
                <div id="welcome"> 
 
                  </div> 
              </div>  
              <div id="right"> 
                <div id="sidebar"> 
 
 
                  <div style="font-weight:bold;margin-top:20px"></div>  
                  <div style="text-align:center;margin:20px 0"></div> 
                </div> 
              </div>  
             <div class="clear" style="height:25px"/> 
            </div>  
            <!-- end content --> 
          </div>  
          <!-- end container --> 
        </div>  
        <div id="footerWrapper"> 
          <div id="footer"> 
            <p style="padding-top:5px">fff 
              <strong>ffff</strong> 
 
            </p> 
          </div> 
        </div> 
      </div> 
    </div> 
  </body>
 
</html>

The CSS:

/* 
fff
*/
 
 
 
 
html {
	background: #cdb380;
	margin:0 0 0 -1px;
	padding:0;	
	overflow-Y: scroll;
}
 
 
body {
	padding:0;
	margin :0;
	display:table; 
	width:100%;	
}
 
 
 
 
body {
	color:#000000;
	font-family: 'Trebuchet MS', sans-serif ;
	font-size: 13px;
	font-style: normal ;
	font-weight: normal ;
	text-transform: normal normal;
}
 
 
p {
	letter-spacing: normal ;
	line-height: 1.7em ;
}
 
h1 {
	color:#000000;
	font-size:22px ;
	margin:25px 10 10px 10;
	clear:both;
}
 
 
h2 {
	color:#000000;
	font-size:20px ;
	margin:20px 10 10px 10;
	clear:both;
}
 
 
h3 {
	color:#000000;
	font-size:18px;
	margin:25px 20 25px 20;
	clear:both;
}
 
 
 
a:link, a:visited {
	color:#683a1e ;
	text-decoration:none;
}
 
 
a:hover {
	color:#020100;
	text-decoration:underline;
}
 
 
 
 
 
 
 
#wrapper {
	background: transparent url( page-vbg.jpg ) repeat-y scroll 50% 0px ;
	margin:0 auto ;
	width:100%;
}
 
 
 
body {
	background-color:#cdb380;
}
 
 
 
 
 
#bg {
	margin:0 auto;
	padding:0;
	background:transparent ;
	background-image: url( hat.jpg ) ;
 	background-repeat:no-repeat;	
	background-position: center top ;
}
 
 
 
 
 
#header {
	margin: 0 auto;
	min-height:25px;
	height: 25px;
	width: 800px;
}
 
 
#page {
	background: transparent url( page-bg.jpg ) no-repeat center top;
}
 
 
 
 
 
 
#container {
	margin:0 auto;
	width:800px;
 
}
 
 
#banner {
	margin: 0 auto;
	height:170px;
	width:100%;
}
 
 
  #nav1 {
	height:30px;
	margin:0 auto ;
	width:792 px;	
	text-align:center;
}
 
 
#nav1 ul {
	display:table;
	margin:0 auto;
	padding:0;
	list-style-type:none;
	position:relative;
	height:30px;
	text-transform:uppercase;
	font-size:12px;
	font-family:Arial,sans-serif;
}
 
 
#nav1 ul li {
	list-style: none
	display:block;
	float:left;
	margin:0;
	padding:0;
	background:transparent url("hmenu.jpg") repeat-x top left;
	}
 
#nav1 ul li a {
	display:block;
	float:left;
	color:#CCCCCC;
	text-decoration:none;
	padding:0px 16px ;
	line-height:30px;
	font-weight:bold;
}
 
 
#nav1 ul li a:hover, #nav1 li#current a {
	display: block;
	position: absolute
	left: none;
	color:#FFFFFF;
	background:transparent url("hmenu-sel.jpg") repeat-x top left;
	}
 
 
#nav1 li ul {
	display: none;
	width: 6em; /* Width to help Opera out */
		}	
#nav1 li:hover ul {
	display: block;
	position: relative
	left: none;
	color:#FFFFFF;
	background:transparent url("hmenu-sel.jpg") repeat-x bottom left;
		 }
#nav1 li:hover li {
	position: none;
	width: 16em;
	left: -999em;
		 	 }
#nav1 li:hover li a {
	border-bottom: 1px solid #fff;
	color: #fff;
	 }
#nav1 li li a:hover {
left: auto;
	 }
 
 
#content {
	width:792px;
	margin:0 auto ;
	text-align:center;
	min-height:720px;
}
 
 
 
#content p {
	text-align:justify;
}
 
 
 
 
 
 
#footerWrapper {
	margin:0 auto;
	height:150px;
	padding:0;
	background:transparent url( footerWrapper-bg.jpg ) no-repeat scroll center top ;
}
 
 
#footer {
	margin:0 auto;
	padding:0;
	width:800px;
	height:70px;
}
 
 
 
 
#footer {
	color:#FFFFFF;
	text-align:center;
}
 
#footer a:link, #footer a:visited {
	color:#FFFFFF;
}
 
 
#footer a:hover{
	color:#0654ad;
	text-decoration:none;
}
 
 
 
 
 
 
 
 
#right {
	width:200px;
	padding:10px 20px 20px 20px;
	float:left;
}
 
 
#center {
	width:512px;	
	padding:10px 20px 20px 20px ;
	float:left;
}
 
 
#content p {
	margin-top:10px;
	text-align:justify;	
padding-right:25px;
padding-left:25px;
}
 
 
 
 
 
 
 
#sidebar ul.vmenu {
	list-style: none;
	text-align: left;
	margin: 7px 0px 8px 0px; 
	padding: 0;
	text-decoration: none;	
	border-top: 1px solid #c0c0c0;	
}
 
 
#sidebar ul.vmenu li {
	list-style: none;
	padding: 4px 0 4px 0px;
	margin: 0 2px;	
	border-bottom: 1px solid #c0c0c0;
}
 
 
 
#sidebar ul.vmenu li a {
	text-decoration: none;
	color:#683a1e;
}
 
 
#sidebar ul.vmenu li a:hover {
	color:#101010;
}
 
 
#sidebar ul.vmenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.vmenu ul li { border: none; }
 
 
 
 
 
 
 
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
 
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
 
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
 
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
 
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
 
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }
 
#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	
 
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

I've posted on another help forum and I was told to give up, haha! I've considered accomplishing what I'm aiming for by using the simple navigation bar and then anchors on each individual page, but, I would still like to figure out how to make the drop-down menus work, since I believe the result will be better! Can anyone here offer me any help?

Stomme poes
Stomme poes's picture
User offline. Last seen 29 weeks 5 days ago. Offline
rank Elder
Elder
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Lawlz

Quote:

I've posted on another help forum and I was told to give up, haha!

Seriously? Wtf was their problem?? Dropdowns can be difficult at first, but at some point they stop looking all messy to you and you "get" it.

Though, for me, the way I "got it" was by looking at the menu at HTMLdog... which has the same (or nearly the same) Javascript as what you have in the <head> for IE6.

Quote:

1) In Firefox, when I roll over the drop down, the green selection highlight covers up the text, and if I move the cursor around, the selection grows and shrinks, as if there were a gap between the buttons. I'd like for the buttons to be immediately next to each other, highlight fully, and for the highlighted text to show. What part of my code is controlling all of this?

In your case, it seems to be a strange implementation of the li:hover ul part.

Quote:

2) The drop down menu item bars highlight with green only half-way through. Separating the item bars, I have a white line, which also only goes as far as the green selection highlight and leaves the rest transparent. Why does this happen? I would like for the item bars to highlight fully and for the white line separating the bars to carry through full-length as well.

Your anchors are floated. Floats shrink-wrap to their contents, the same way inline-elements do. Your sub-anchors are absolutely positioned. Position: absolute also shrink-wraps like a float does. There's no good reason to have those anchors positioned at all. Position the submenu instead.

Quote:

3) In IE, not only does the drop down menu not work at all, but the navigation bar is set to the left. I know there's a ton of compatibility issues between the different browsers, although I thought I had that covered with some javascript. How would I go about fixing it for IE?

You are fixing it for IE6, who is the only IE who needs the Javascript. If you mean "IE7" when you say "IE", there's another issue going on and it still doesn't seem to be mentioned on the HTMLdog site (where that same code also doesn't work in IE7 unless the Javascript is there, even though IE7 doesn't use it!). It's a strange bug in IE (the dropdowns don't appear), but pretty easy to fix.
The centering thing is likely some effect of positioning you have.

It may also have something to do with you putting the script tag before the head! It goes inside the head, not before, and usually it should be the last thing mentioned in the head (so first the charset/encoding and content-type, then the title, then the links to the css, and lastly the scripts. Browsers stop to load CSS stylesheets, and then they stop again to load Javascript).

But first, let's simplify your code.

RESET
If you notice yourself setting "margin: 0" on everything all the time, you can set it once, on all elements, at the beginning of your stylesheet. I do it because I'm lazy and feel secure knowing anyone I don't set explicit margins on, is set to 0.

* {
margin: 0;
}
I don't personally put any other elements in that declaration, because that * is a small penalty on the browser (it has to crawl through every single element on your page and set its margins to 0, even elements who don't have default margins). Not one you'll ever see, but it's there.

A few elements have default padding, which is not the same cross-browser. The elements who have this the worst are lists. I remove padding from a few elements right after the * line:
html, body, ul, ol, th, td {
padding: 0;
}
however, the html and body padding doesn't matter to most people most of the time... only add those in if it matters visually in a browser who puts padding on those elements. The th and td normally also don't matter, unless you have very tiny table data cells and header cells... Firefox adds 1px of padding to each cell (in any normal table, you'd never notice).
If you don't have any ol's on your site, this means you just need
html, body, ul {
padding: 0;
}
because I see you're already removing padding from your body and html elements. Now, your lists are all set to 0 for everything in both modern browsers and IE.
If I know all my lists won't have bullets, I'll add the list-style: none to that declaration too.. but don't do this if you only want no bullets on your main menu.

UL (#nav1)
Normally we tell people not to wrap their menus in divs, but you have good reason... or, I thought you did. But no, that div isn't holding the background I see on it. Since it's not holding the background, just get rid of it, and put your "nav1" id on the menu itself. Makes the rest of your CSS one level cleaner.

I would not set an explicit height on the ul as you have on the div. It's not doing anything visible, and in general, it's not a great idea to set heights on stuff with text in it.
Next, no display: table. IE6 and 7 don't know what that is.
Make your main ul position: relative, keep that width and auto-margins and list-style: none you had on the div, and that's about all you need there. Save font settings for when you're down to the level of the text.

If there's going to be any position: relative boxes coming after the menu, then that position: relative on the ul lets you set a high z-index on it there. IE has a bug where a z-index set on the submenus won't let them show up on top of positioned elements who come later in the code. So set the z-index on the parent ul instead. Works on everything except Flash (Flash is a special case).

LI (#nav1 li)
The li's, traditionally for dropdowns are floated.
Anyone you set a float on, does not need you to also say "display: block". Li's are blocks to start with anyway, but anyone set to float, even an inline like an anchor, gets turned into block context either way. So you can leave that out, safely, every time.
You do want to mention width. Widthless floats are legal but Opera used to? get the jitters with no stated width. Get around this by stating "width: auto" on them.

You'll want to set these to position: relative (yes, even tho the ul is also position: relative). This lets your submenus line up with their parent li, not the ul itself.

background:transparent url("hmenu.jpg") repeat-x top left;
"transparent" is default. You only need it if you've set background-colours on other li's earlier, to override. You also don't need quotes in your urls (they don't hurt though). I would put this on the anchors though and not on the li's.

A (#nav1 a)
I tend to set these to display: block and not float, except when that makes a whitespace bug in IE. For a single-level dropdown, you won't see any whitespace bug (extra space under the anchors).
As blocks inside widthless floats, they'll push the li's open with their contents and any side padding (like you have). Don't set them to 100% wide for any reason (in the future) because IE6 gets confused. You can set any other kind of width on them though.
Put the background image on them here, and add in the font, color and other text declarations here.

You have:

a:link, a:visited {
	color:#683a1e ;
	text-decoration:none;
}
 
a:hover {
	color:#020100;
	text-decoration:underline;
}

This could be
a {
  color:#683a1e ;
  text-decoration:none;
}
a:focus, a:hover {
  color:#020100;
  text-decoration:underline;
}

a alone will be inherited by :link and :visited. Never forget to add :focus to your :hover declarations... 99% of the time, you want keyboarders to see the same effects as mousers. Esp since in this menu, where you have changing background and foreground colours, you may want to remove the outline that's default in some browsers. Normally a Good Thing, they do look ugly on menus like this. So you can replace it with focus styles. I'd only remove outline from the menu specifically, though, not all anchors.

#nav1 a:focus {
styles...;
outline: none;
}

A (#nav1 a:focus, #nav1 a:hover, #nav1 #current a)
If you use a sprite (many images put together to a single image) you can use one image for the default brown, then simply change its background-position here to show green. This is one less request to your server for images, and the browser doesn't have to wait til the user hovers or focusses to fetch it. Remember to have a default flat brown background colour for your regular anchors, and change both background COLOUR as well... if your images don't load, users still get a similar effect.

UL UL (#nav1 ul)
You have:

#nav1 li ul {
	display: none;
	width: 6em; /* Width to help Opera out */
}

Display: none is not a great idea for content. Mostly because screen readers will ignore it (and they're not going to mouse over your menu to see it appear anyway) so that content is lost to those users (unless they are not blind but still using a screen reader anyway). A better, more accessible technique is to position them absolutely off the screen.
#nav1 ul {
  position: absolute;
  top: 30px; /*or whatever you wanted for menu height*/
  left: 0;
  width: 16em;
  margin-left: -999px; <----- HERE
}

You can either use the margin here and have left set to 0, or you can not use margin and just set left itself to -9999px. I've got it in px because if you want to have your submenu items appear onscreen when keyboarders focus on them, for some reason px are necessary (or it's some issue I never figured out why em's wouldn't work).
Set all your other styles for the sub ul here too, if any. This is one of those times where position: absolute does just about everything you want, and it's good for it. IE especially does not like switching display states on :hover (but we'll still need something for IE7 to get the submenu moved back onscreen).

Before we style to bring it onscreen, IE7's fix (which as far as I can tell, you only need if you move the submenu with left rather than margin...):
:hover {
visibility: visible;
}
This doesn't change how anything looks, which is why it's totally safe. But it somehow triggers IE (6 and 7, but of course 6 can't hover on li's, so irrelevant here). Leave it commented out in your code, and if all the other browsers are hovering fine and IE7 isn't, uncomment it. If IE7 is working too, remove the trigger. The HTMLdog Sons of Suckerfish code definitely needs it, but code I've done later didn't need it.

UL UL ONSCREEN
#nav1 li:hover ul, #nav1 a:focus+ul {
margin-left: 0;
}

That's it. No other code.

If IE6 does not like this after you add the .sfHover classes to your CSS, you might need to make it margin-left: auto instead... I forget because one set of Javascript wants 0 while the other wants "auto" and I use a different Javascript in my menus. Usually IE does not like "auto" because it gets confused by any text-align you set on anchors for some reason. Play around with it.

Better to set all the styles you want on the "default" setting, because really the only thing you really want to change on hover is have the submenu appear at all. This way, the browser's just doing one thing on :hover or :focus.

UL UL LI (#nav1 ul li)
Undo here whatever you don't want these to inherit from the top-level li's, like you did in your code:
position: static;
You might want to keep them floated, but set their widths to 16em like the submenu. Otherwise, set
float: none;
display: block;

UL UL A (#nav1 ul a)
since your sub anchors are also set to display: block, you may get the IE whitespace bug here. One way to get rid of it is to float the sub anchors (and set their widths to 100%... floats otherwise shrink-wrap like you have now, and since they are inside a static block LI with a set width, it's ok to set 100%... but then, remove side padding).

#nav1 ul a {
  float: left;
  width: 100%; /*or 16em*/
  padding: 0; /*overrides the padding set on #nav1 a's*/
  color: #fff; /*overrides the colour you set on #nav1 a's*/
  text-align: center; /*so you don't need padding anyway*/
  border-bottom: 1px solid #fff;
}

Your #nav1 :hover/:focus styles for the top-level anchors should be what you want/need for the subs, so no extra code needed here for that state unless you want to override something.

Not tested, but to get :focus to make your sub anchors show up to a keyboarder, you may need a separate declaration like this:
#nav1 ul a:focus {
width: 16em;
margin-left: 9999px; /*when focussing only, the sub ul is still -9999px offscreen... so we add that back to get the anchor onscreen*/
}

However when you click on an item, many browsers also :focus on the item too... this works badly in Firefox.

#nav1 ul a:focus:hover {
  margin-left: 0; 
}

This fixes the problem in Firefox... if your focussing AND hovering, you must be focussing with a mouseclick, so this code makes sure your submenu item doesn't vanish when you click it.

You'll need to add in the .sfHover classes in all the usual places like you've been doing.

There's a menu that basically follows this code, though it does have a wrapping div for holding a background image wider than the menu, so the CSS code is off by one (as yours is now). This page you can view the CSS for the menu. It has a different Javascript that you're using so the classes are different, and it has some more focus stuff for IE6. It also has more code than your menu because there is a sub-sub menu too. But, it's something you can reference if you want. Otherwise, the HTMLdog one is very good for getting dropdown menu code straight in your head, because it's so clean and it goes in logical order. Your menu currently is very similar anyway.

Hope that helps.

I'm no expert, but I fake one on teh Internets

CupidsToejam
CupidsToejam's picture
User offline. Last seen 17 weeks 5 hours ago. Offline
rank Guru
Guru
Timezone: GMT-6
Joined: 2008-08-15
Posts: 2634
Points: 1552

Wow Stomme poes, that was a

Wow Stomme poes, that was a mouthful!


First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Stomme poes
Stomme poes's picture
User offline. Last seen 29 weeks 5 days ago. Offline
rank Elder
Elder
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Ew

Diarrhea of the keyboard.

Hm, I notice I mixed up -999px and -9999px. Whichever is used, it should be the same.

Never was much good at that math stuff : (

I'm no expert, but I fake one on teh Internets

cade
cade's picture
User offline. Last seen 1 year 35 weeks ago. Offline
newbie
Timezone: GMT-4
Joined: 2010-08-27
Posts: 4
Points: 5

Thank you for your extensive

Thank you for your extensive reply! It's going to take me a bit to work my way through it, but, I appreciate your help greatly. If I have any questions, I'll be back to ask them! Big smile

The other person, in a nice way, told me that it's essential to have a solid working navigation bar over some of the fancier functions, which may go awry between the different browsers. Their advice was to stick to the simpler, safer solution.

All right, I'm going to get back at my code now!

Stomme poes
Stomme poes's picture
User offline. Last seen 29 weeks 5 days ago. Offline
rank Elder
Elder
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I agree

Quote:

The other person, in a nice way, told me that it's essential to have a solid working navigation bar over some of the fancier functions, which may go awry between the different browsers. Their advice was to stick to the simpler, safer solution.

I agree with that. Also remember dropdowns *in general* are considered less accessible than other navigation options.
http://www.useit.com/alertbox/20001112.html
Megas can be considered better for users with poor mouse control because the hoverable area is really, really big:
http://www.useit.com/alertbox/mega-dropdown-menus.html
but I find it harder to get megas working purely with CSS for keyboarders. You're forced to rely more on Javascript, which not everyone has.

I'm no expert, but I fake one on teh Internets

cade
cade's picture
User offline. Last seen 1 year 35 weeks ago. Offline
newbie
Timezone: GMT-4
Joined: 2010-08-27
Posts: 4
Points: 5

Stomme poes wrote: Quote: 3)

Stomme poes wrote:
Quote:

3) In IE, not only does the drop down menu not work at all, but the navigation bar is set to the left. I know there's a ton of compatibility issues between the different browsers, although I thought I had that covered with some javascript. How would I go about fixing it for IE?

You are fixing it for IE6, who is the only IE who needs the Javascript. If you mean "IE7" when you say "IE", there's another issue going on and it still doesn't seem to be mentioned on the HTMLdog site (where that same code also doesn't work in IE7 unless the Javascript is there, even though IE7 doesn't use it!). It's a strange bug in IE (the dropdowns don't appear), but pretty easy to fix.
The centering thing is likely some effect of positioning you have.

Okay, I've attempted to go through your text, step-by-step, and my lack of knowledge of CSS has me somewhat stumped. I've decided to go with a simple, solid navigation bar and on-page anchors. Do you have any idea why the nav bar keeps going over to the far left in IE, yet staying where it ought to be in Firefox? Puzzled

PS - I like your website. Is that your art and is that CSS which animates the images?

Stomme poes
Stomme poes's picture
User offline. Last seen 29 weeks 5 days ago. Offline
rank Elder
Elder
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

display: table

I did say IE has no idea what display: table means, yet you are using it.

So here's what IE (less than 8 ) sees: the ul is just display: block. There are automargins, but those can't center blocks unless the blocks have an explicit, non-100% width. I think the browsers who can deal with display: table are letting it get centered from the text-align: center on the parent div (I'm not sure if that's right, tables are blocks and I would be surprised if they align based on text-align... but that's what I'm going with for now).

Yes, it's my art. But I sold my soul. I don't own those characters... I sold them.

I'm no expert, but I fake one on teh Internets

cade
cade's picture
User offline. Last seen 1 year 35 weeks ago. Offline
newbie
Timezone: GMT-4
Joined: 2010-08-27
Posts: 4
Points: 5

Stomme poes wrote: Yes, it's

Stomme poes wrote:

Yes, it's my art. But I sold my soul. I don't own those characters... I sold them.

Sounds like you regret your choice! Who did you sell them to?

Stomme poes
Stomme poes's picture
User offline. Last seen 29 weeks 5 days ago. Offline
rank Elder
Elder
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Mah boss

Mah boss.

I'm no expert, but I fake one on teh Internets