- This topic is empty.
-
AuthorPosts
-
May 13, 2013 at 11:44 am #44744krambo09Member
My page looks fine in all browsers except IE.
It’s not just one version of IE either its all of them.
Here’s the site I’m working on:
http://aquamasterfountains.businesscatalyst.com/Please Help!!!
May 13, 2013 at 11:52 am #134932Paulie_DMemberNot sure it’s that great in Chrome.
Are those menu items supposed to be bigger on hover or not?
In Chrome there is also a ‘gap’ between the menu item and the dropdown list which can sometimes make it hard to select an item from the submenu.
May 13, 2013 at 12:01 pm #134936krambo09MemberI was in the process of working on that. That should look/function properly now.
May 13, 2013 at 12:06 pm #134939Paulie_DMemberPart of the problem is that the links are larger (probably due to the padding) than the background image used to create the navbar.
The list items are currently 59px tall (based on Chrome Web Tools) but the image is 57px. There is part of it.
Also, a cursory glance shows that you aren’t really containing the floats in the header properly.
Then you have odd negative margins on the body (presumably because you are trying to get things in the right place because other things are moving around)
May 13, 2013 at 12:31 pm #134943Paulie_DMemberOn closer examination I do think you might want to look into restructuring the header.
You seem to have items that are floated left that you want to appear on the right (like the address) etc.
The hgroup element has recently been removed from the HTML5 spec so it would be a good idea to remove that anyway.
May 13, 2013 at 10:07 pm #134970XordanMemberThere are obviously a few things to review in your html. But at this time, if you just want to make it work. You can do it!
First, remove the “clear:both” on your hgroup. You need your logo to stand on the left side on top of the page, so remove the line “width:391px;” on #logo. On this same rules, adjust the margin like this “margin:8px 0 19px 0”. Your logo and main menu will be back to their place. Now add a css rule to remove the extra right margin inside your #utility-nav like this :
#utility-nav > * {
margin-right: 0;
}Now the last thing to do is to fix your input #CAT_Search, first, remove the “float:right” and add a “display:block;” on it. Finally, remove the
tag between your input and your anchor “search”. Everything should look great in Chrome, FireFox and IE 8+.Hope this help.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.