My site looks pants in internet explorer

RobinTheSnapper · February 9, 2009

Hi

I am about 80% there with how I want my site to look. I've been building it on my mac in firefox. However I thought I would just check it out at work to see how it looked.

At work we have IE 6 and the site just doesn't look as good and the navbar doesn't function correctly.

The problems I see are:
- The fonts look very basic, they look much richer in firefox.
- The navbar does not work properly (I've only set up gallery and home so far, but once in gallery the links don't work)
- The alignment of the slideshow and navbar on the homepage is not correct. I have used negative margins when building the site as in firefox this all looked fine and kept things tight, however now this is causing overlap.

Can anything be done to make the site play nicely? I haven't tried the site on IE7, will IE7 display the site in the same way?

Thanks

du8die · February 9, 2009

Link?

denisegoldberg · February 9, 2009

RobinTheSnapper wrote:

The fonts look very basic, they look much richer in firefox.

Are you checking firefox & IE on the same operating system? The reason I ask is that depending on the font you chose to use, it might be installed on a Mac but not on Windows. If you choose to use a font that is only available in one of the environments, you should set your CSS up with a second font choice in case the first one isn't installed.

This tool shows a list of fonts installed by default in the different environments - http://www.typetester.org/.

--- Denise

RobinTheSnapper · February 9, 2009

Sorry

www.robinparkinsonphotography.com

My customising is hardly cutting edge lol, but it does look a lot nicer in firefox on the mac. The font is just set to arial, is it just the way the different browsers render the fonts?

How about the spacing and nav bar issue? It was all perfectly aligned on my macbook...

Many thanks

Allen · February 9, 2009

RobinTheSnapper wrote:

Hi

I am about 80% there with how I want my site to look. I've been building it on my mac in firefox. However I thought I would just check it out at work to see how it looked.

At work we have IE 6 and the site just doesn't look as good and the navbar doesn't function correctly.

The problems I see are:
- The fonts look very basic, they look much richer in firefox.
- The navbar does not work properly (I've only set up gallery and home so far, but once in gallery the links don't work)
- The alignment of the slideshow and navbar on the homepage is not correct. I have used negative margins when building the site as in firefox this all looked fine and kept things tight, however now this is causing overlap.

Can anything be done to make the site play nicely? I haven't tried the site on IE7, will IE7 display the site in the same way?

Thanks

You have a mixture of html and CSS for either centering your banner and
nav or placing them on the same line. Which one do you want?

This CSS will center the nav and banner and generally clean it up. Replace
your whole CSS with this.

/* My logo */

#my_banner {
top: 20px;
width: 363px;
height: 45px;
margin: 10px auto 0; 
background: url(http://robinparkinson.smugmug.com/photos/469803282_XRinJ-L.jpg) no-repeat;
}

.homepage #navcontainer {margin-bottom: 10px;}
.galleries #navcontainer {margin-bottom: 0;}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: inline;
}
    
#navcontainer ul li a {
text-decoration: none;
padding: 0px 30px;
color: #fff;
font-family: Arial, Verdana, lucida, helvetica;
font-variant: small-caps;
font-size: 16px;
_font-size: 14px;
}

#navcontainer ul li a:hover {
color: #f9a40f;
/* #8cca1e */
}


#userBio {text-align: center;}

#bioBox .photo {display: none;}
#bioBox .boxBottom {
background: none !important;
border: none !important;
}

#bioText {display: none;}

.notLoggedIn .nophotos {display: none;}
.homepage #breadcrumb {display: none;}

#header_wrapper, #footer_wrapper, #cobrand_footer, #header,
#smugmug, .smugmug #header, .smugmug #footer {margin-left: 15px;margin-right: 15px;min-width: 755px;
width: auto;
}


h3.title,
#breadcrumb .title,
#lightBoxNav .title,
.homepage .boxTop .title,
.cartbuttons .title,
#comment_header .title {font-weight: normal !important; color: #f9a40f !important;}
/* #8cca1e */

#pageNavigation_top, .pageOn, #photoNavTop .title, .miniBox a.nav {font-weight: normal !important;}

#photoBy, .smugmug #caption_bottom {text-align: center; border: none;}

#toolbar {display: none;}




/* FIND PAGE */

.find #bioBox,
.find #categoriesBox,
.find #galleriesBox {
display: none !important;
}

.find #keywordsBox {
display: block !important;
}

.find #datesBox {
display: block !important;
}

.find #mapBox {
display: block !important;
}

#map {height: 500px !important;}

.find #popularPhotos {
display: block !important;
}

.find #findText {display: block !important;}

.homepage #popularPhotos,
.homepage #mapBox,
.homepage #datesBox,
.homepage #findText,
.homepage #keywordsBox {display: none;}

#findText {display: none;
text-align: center;
font-size: 16px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}




/*Hides galleries from front page */
.homepage #galleriesBox,
.homepage #categoriesBox {display: none;}

.galleries #bioBox {display: none;}

.galleries #galleriesBox, 
.galleries #categoriesBox, 
.galleries #featuredBox {display: block;}




/* gets ride of RSS feed */
#feeds {display:none;}

/* turn off the login link on the minifooter */
.loginLink {display: none;} 

/* turn off the cart link on the minifooter */
.cartlink_footer {display: none;}

RobinTheSnapper · February 9, 2009

Thanks Allen for tidying up my amateur hacking of code! I really am guessing most of the time until I get things looking correct. I appreciate the help you guys give people like me on these forums.

The font in internet explorer still looks very skinny though. In Firefox and Safari on the mac it is a good match for my logo header.

Can you help with the font weight issue? Is there a way to make the font appear in bold for internet explorer, perhaps that would give the same look?

Here is a screen shot of the mac fonts in firefox:

IE7:

Also it doesn't matter, but the spacing between the menu items is wider when on a IE, not sure why that would be, but I have sorted by changing the padding so it suits both browsers.

Thanks

My site looks pants in internet explorer

Comments