Topic: Rollover problems in IE and centering problems Mozilla (Page 1 of 1)

Hi all,
Finally have some free time to update my own webpage and am trying to do the design in xhtml strict and css so far document validates fine for both.

now the fun starts, the menu bar rollover functions fine in Mozilla but not IE, nothing strange there but any advice apreciated.

The other problem is that the page centres properly in IE, but not Mozilla.

the page can be found here: http://art.iconiancds.com/iconian/index2.php

any and all help greatly appreciated.

Matthew
iconianCDS

matthew@iconiansolutions.com
www.iconiansolutions.com

From what I understand, a standards compliant browser will center with

foo {
    margin-left: auto;
    margin-right: auto;
}

where foo is your div/whatever

Ok fixed the centering problem it turns out i have the margin properties on the wrong DIV (thanks chex, you made me check again), but my rollovers still dont. HELP!!!

matthew@iconiansolutions.com
www.iconiansolutions.com

Do you mean the section "our services link" where firefox doesn't change the link color on hover, but IE does?

I'm able to set the background color, and hover color by appending your stylesheet with:

.inlinelink {
 	color:#ffffff;
 	background-color:#cc0000;
 }

.inlinelink:hover {
 	color:#0000ff;
 	background-color:#ff0000;
 }

I'm not really sure how the pseudo-element :link takes precedent over setting 'a' without a pseudo element. I modified the above style to include :link and now it looks like it's working:

.inlinelink:link, .inlinelink {
 	color:#ffffff;
 	background-color:#cccc00;
 	text-decoration:none;
 }

.inlinelink:hover {
 	color:#0000ff;
 	background-color:#ff0000;
}

To make your code simpler, instead of setting every 'a' element class to "inlinelink", just set the parent's div(or whatever element) class or id, and uses a selector to affect the links

#content a, #content a:visited {
    color: rgb(0,0,128);
    text-decoration:none;
}
#content a:hover {
    color: rgb(0,0,255);
    text-decoration:underline;
}

Here's a few links that might interest you: check out listamatic and selectorial http://css.maxdesign.com.au/index.htm

Some of your style is trying to use properties that don't exist: http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.iconiansolutions.com%2Fcss%2Fstyle.css
css2 reference: http://www.w3.org/TR/CSS21/

(Edited by chex on 04-30-2006 02:10)

Hi Chex,
Thats the old site that is being replaced....
I know that that one was not standards compliant hence the fact it is being replaced....

The site i'm having problems with is http://art.iconiancds.com/iconian/index2.php and none of the rollover buttons work in IE

Matthew

matthew@iconiansolutions.com
www.iconiansolutions.com

(Edited by iconian on 04-30-2006 02:50)

First, ditch the img tags, make the navigation a list and make the anchors the lowest element.

<ul id="top_box_right">
			<li id="home_button"><a href="index.php?">Home</a></li>
			<li id="about_button"><a href="index.php?">About</a></div>
			<li id="services_button"><a href="index.php?">Services</a></div>
			<li id="portfolio_button"><a href="index.php?">Portfolio</a></div>
			<li id="contact_button"><a href="index.php?">Contact Button</a></div>
			<li id="privacy_button"><a href="index.php?">Privacy Button</a></div>
		</ul>

Now, you have two options; you can use the text in the boxes as browser rendered, or you can put a different background image on each <a>. Personally, I don't see any benefit to the latter, and it just gobbles bandwidth. So, instead:

#top_box_right {
list-style:none;
float:right;
}

#top_box_right li {
float:left;
}

#top_box_right li a {
text-transform:lowercase;
font: 0.8em Arial,Helvetica,sans;
color: #fff;
background: transparent url("/path/to/hover.state") 0 0 no-repeat;
width:84px;
height:67px;
}

#top_box_right li a:link, #top_box_right li a:visited {
background-image: url("/path/to/normal.state");
}

The CSS isn't exact, but should give you a good idea of where to go with it. If you need more information, I find one of the best resources to actually be w3schools, right over here: [url http://www.w3schools.com[/url].

Cheers,
DC

Edit: Fixed the url UBB code.

(Edited by divinechaos on 04-30-2006 04:08)

Ok, as per divinechaos's suggestion and after a bit of reading i changed the nav to a ul, now my rollovers work... well kinda, now they arent aligning with the top of the ul, again only in IE.

Matthew

matthew@iconiansolutions.com
www.iconiansolutions.com

thank you all,
I think I finally have it sussed, have a look and tell me what you think.

http://art.iconiancds.com/iconian/index2.php

Matthew

matthew@iconiansolutions.com
www.iconiansolutions.com