CSS Display Problem with IE7 and Firefox

Hello everyone,

I am testing the use of this template from OSWD (Open Source Web Design).

www.oswd.org/design/preview/id/2074

The page displays well in most browsers, including Firefox and IE 6, but does seem to have a slight problem in IE 7.

Basically the borderline should be directly positioned on the right hand side of the nav bar.

Any ideas how to amend the code anyone so that IE 7 displays the same way as Firefox. I am happy with the way Firefox displays the page. The css is as follows.

Thanks in anticipation
:)

Cheers

BG

body {
margin:0; padding:0;
font-family:verdana, arial, sans-serif; font-size:80%; color:#666666; background-color:#32668E;}

p {
margin:0; padding:0.4em 0.2em 0.6em 0.2em;}

a:link, a:visited {
color:#80C62E; text-decoration:underline;}

a:hover {
color:#32668E; text-decoration:none;}

a:active {
color:#82D339; text-decoration:underline;}

div.wholepage {
margin:0 8% 0 8%; padding:0; background-color:#FFFFFF;}

div {margin:0; padding:0;}

h1 {
color:#32668E; font-size:150%; font-family:"trebuchet ms", "lucida sans", arial, sans-serif;
font-weight:normal;}

/* +++ Start Of Header Section +++ */

#header {
margin:0; padding:0;}

.superheader {
background-color:#294D69; text-align:right; color:#FFFFFF; padding:2px 2em 2px 2px;}

.mainheader {
margin:0; padding:45px 1em 15px 1em; text-align:left;
background-image:url(headbg.jpg); * background-repeat:no-repeat; background-position:right top;}

.mainheader h1 {
font-size:300%; margin:0 0 5px 0; padding:0;}

.mainheader p {
text-indent:4em; color:#5D99C7; margin:0; padding:0.2em; font-weight:bold;}

.subheader {
background-color:#32668E; margin:0; padding:0.5em; text-align:center; color:#FFFFFF;}

/* +++ Start Of Side Menu Section +++ */

#sidecontainer {
margin:0; padding:0; float:left; width:20%; text-align:center;}

#sidecontainer h2 {
display:block; margin:0; padding:0.2em; color:#FFFFFF; background-color:#294D69; font-weight:normal;
font-family:"trebuchet ms", "lucida sans", arial, sans-serif; font-size:120%;}

.nav {
margin:0 0 1.5em 0; padding:0; list-style-type:none; background-color:#FFFFFF;}

.nav li {
margin:0; padding:0; display:block; border-bottom:1px solid #294D69;}

.nav a:link, .nav a:visited {
display:block; margin:0; text-decoration:none; color:#32668E; margin:0; padding:0.5em;}

.nav a:hover {
display:block; margin:0; text-decoration:none; color:#666666; margin:0; padding:0.5em; background-color:#ACCBE2;}

.nav a:active {
display:block; margin:0; text-decoration:none; color:#32668E; margin:0; padding:0.5em;}

/* +++ Start Of Content Section +++ */

#content {
margin:0 0 0 20%; padding:0.8em; border-left:1px solid #294D69;}

#content img {
float:left; border-style:none;}

q {
display:block; margin:0; padding:0.4em 20% 0.6em 20%; color:#999999; font-size:120%;
text-align:center; height:3em;}

q:before, q:after {
content:"";}

#content h1 {margin:0; padding:0.1em; text-indent:2.5em;}

/* +++ Start of Footer Section +++ */

#footer {
margin:0; padding:0;}

.superfooter {
background-color:#32668E; height:1.8em;}

.mainfooter {
background-color:#FFFFFF; text-align:center;}

.subfooter {
background-color:#294D69; height:0.6em;}

#footer p {
font-size:75%; color:#999999; padding:0.3em;}

Can you give me a screenshot of it in IE 7? Or, just give me a link to a Web site that allows you to preview Web sites in other browsers. (I forgot the URl to the Web site that does that.)

Hi Connor B.

Thanks for your reply. I have posted a screen shot at the following address.

http://www.calmhostings.com/Daisy.jpg

www.browsercam.com is a good site for multiple screenshots.

You can get a free account for 24 hourd. But I think its a bit expensive for casual users like myself. (:-)

I think there is an open source ome at www.browsershots.org aswell. I will have to check that one out aswell.

OK Connor B. Thanks again for your efforts.


BG

Well, I don't know how to help you because I can hardly read the coding. It's all strangely organized (which to me is unorganized) in a way I can't read it. It's width is adjusted with percentages as well as it's text which I wouldn't recommend because of the errors with browsers.

If I were you, I'd just recode it... It's a really simple design and a really simple code. Just copy some of the CSS for the headers and such and do the rest yourself! Unless, you don't know HTML/XHTML or CSS.

OK Connor B

Thanks for the advice. I am at the beginning of this css stuff.
I will do as you suggested and I am sure I will be able to work out the finer details.

OK Mate

:)

Thanks again

BG

I agree with the percentage thing. I think navigation bars should never be resized. Make them a fixed width.
#sidecontainer {
margin:0; padding:0; float:left; width:150px; text-align:center;}
#content {
margin:0 0 0 150px; padding:0.8em; border-left:1px solid #294D69;}
Doing so seems to make it work fine in IE7 and other browsers.

Many thanks to Aerospace_Eng and Connor B.

The solution works a treat and I really appreciate the advice on navbars and defined pixel widths as opposed to using relative percentages.

Definitely a good learning experience. So once again thank you both for your great advice.

I would have posted this earlier, but for the last 2 night I have been watching Comet McNaught down in Australia -
and a great spectacle it was. :)



BG