14 replies [Last post]
tnederlof
Offline
Regular
Last seen: 12 years 13 weeks ago
Timezone: GMT-1
Joined: 2007-09-11
Posts: 18
Points: 0

Hey I am fairly new to CSS, I am getting away from tables I promise, its just IE is so frustrating (as I am sure you all know). My site works beautifully in firefox but of course even IE7 completely destroys my site. My main problem is when I go to validate I dont even understand whats its talking some of the time. My code is below, could people take a look and see what parts of the css code are giving me trouble in IE and maybe some known workaround?

Thanks alot!

body {text-align: center;background-color: #c1dadf; color: #030000; }

.wrapper { margin-left: auto;
margin-right: auto;
width: 858px;
height: 600px;background-image: url(img/bg2.jpg);background-repeat: no-repeat;}
.bannerpic {height:68px;width:801px;margin-left: 6px;position: relative;left: 5px;
background: url(img/header.jpg) no-repeat;
}

.menu {height:52px;
width: 801px;
margin-left: 11px;
background: url(img/menu.jpg) no-repeat;
}
.content {width: 801px;height: 386px;
position: relative;
left: 5px;
margin-left: 5px;}
.mainbox{
width: 506px;height: 338px;
position: relative;

margin-left: 39px;float: left;
background: url(img/mainbox.jpg) no-repeat;
}

.box1 {
width: 204px;height: 107px;background: url(img/box1.jpg) no-repeat;float: right;margin-right: 40px;}
.box2 {
width: 204px;height: 107px;background: url(img/box1.jpg) no-repeat;float: right;
margin-right: 40px;margin-top: 8px;}

.box3 {
width: 204px;height: 107px;background: url(img/box1.jpg) no-repeat;float: right;
margin-right: 40px;margin-top: 8px;}

.footer h1 {
font: 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;

background-position: 0;
text-align: center;
padding: 4px 0 0;
margin: 16px auto auto;

}

/* @group Bottom Navigation */

#navlist
{


font: 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;

background-position: 0;
text-align: center;
padding: 2px 0;
color: #030000;
margin: 0 auto auto;
}

#navlist ul
{

list-style: none;
text-align: center;
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
}

#navlist li
{
border-right-style: solid;
display: inline;
text-align: center;
margin: 0 0px;
border-right-width: 1px;
padding-right: 5px;
}

#navlist li.last {
border: none;
}

#navlist li a
{
padding: 1px 7px;
color: #030000;
text-decoration: none;
text-align: center;

}

#contentpic {
float: left;
}

/* @end */

.bottombox{
width: 725px;height: 36px;background-image: url(img/bottombox.jpg);
position: relative;

margin-left: 39px;clear: both;top: 8px;}

/* @group menum */

#nav-menu ul
{
list-style: none;
margin: 0;
padding: 12px 0 0 40px;
}

#nav-menu li
{

float: left;
margin: 0 2.7em;
}

#nav-menu a:hover {
color: #12fefb;
}

/* Hide from IE5-Mac \*/
#nav-menu li a
{
color: #030000;
font-size: large;
float: none;
text-decoration: none;
}
/* End hide */

#nav-menu
{
width: 801px;

}

/* @end */

.line {
border-top: 2px dotted #aa0100;
width: 700px;
margin-left: 60px;
margin-top: 16px;
}

.bigpic {
width: 206px;
height: 50px;
margin-left: 45px;
padding-top: 0;
position: relative;
top: 15px;
background: url(img/bigpic.jpg) no-repeat;
}

.bannerpic img {
width: 206px;
height: 45px;
margin-top: 15px;
text-align: left;
float: left;
margin-left: 50px;
}

.bannerpic h1 {
float: right;
margin-top: 45px;
margin-right: 25px;
font: small Georgia, "Times New Roman", Times, serif;
}

.bannerpic h1 a {
color: #030000;
}

.bannerpic a {
border-style: none;
color: #f1f1f1;
}

Altus Designs - Design
@import "styles.css";

Altus Designs Need help? Email us at [email protected]

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 22 weeks 3 days ago
Kansas City Metro
Timezone: GMT-7
Joined: 2007-10-18
Posts: 188
Points: 0

Got a link to your site so

Got a link to your site so we can see it also?

~Soundscape
www.kenlange.com

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 10 years 11 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

You are missing a doctype.

You are missing a doctype.

mattrossidesigns.com

tnederlof
Offline
Regular
Last seen: 12 years 13 weeks ago
Timezone: GMT-1
Joined: 2007-09-11
Posts: 18
Points: 0

Also sry the link is...

Also sry the link is... http://www.altusdesigns.com/new

Is this a good one?

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 22 weeks 3 days ago
Kansas City Metro
Timezone: GMT-7
Joined: 2007-10-18
Posts: 188
Points: 0

That link you gave doesn't

That link you gave doesn't work:
http://www.altusdesigns.com/new

But I have a feeling you would be best served by reviewing this site to begin with anyway:
http://www.positioniseverything.net/explorer.html

Also, read the posts no the importance of doctypes in this forum.

~Soundscape
www.kenlange.com

tnederlof
Offline
Regular
Last seen: 12 years 13 weeks ago
Timezone: GMT-1
Joined: 2007-09-11
Posts: 18
Points: 0

Thanks

Thank you so much for the help so far. The doc type helped ALOT, at least everything is close now. I am looking through that site, it should help me if I can figure out what bugs I am encountering. The link works now sry about that. If someone could take a look and just list a couple of things that may be causing it to break, that would be great. Thank you!

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 22 weeks 3 days ago
Kansas City Metro
Timezone: GMT-7
Joined: 2007-10-18
Posts: 188
Points: 0

Next, I would validate your

Next, I would validate your page and fix all those small errors you have.
http://validator.w3.org/

You can get a validator plug-in for Firefox that is helpful from one of these two download locations:
http://users.skynet.be/mgueury/mozilla/
https://addons.mozilla.org/en-US/firefox/addon/249

You need to close some open tags, for meta, img, and h1, and there are some other issues also. Fix those so you/we know you are working with valid code. You should also code for Firefox first, which is the browser closest to the standards. After your page(Drunk work in Firefox, then fix the bugs that appear in Internet Explorer.

~Soundscape
www.kenlange.com

tnederlof
Offline
Regular
Last seen: 12 years 13 weeks ago
Timezone: GMT-1
Joined: 2007-09-11
Posts: 18
Points: 0

Thank you for the help. As

Thank you for the help. As you can see I have made major progress already! I cleared up all of the stupid XHTML errors and it validates fine now. I also used the holly hack to moves all of varies section to look right, IE put them all 20px to far to the right, in some places more like 28px.

The bottom menu is still screwed up although. I am only testing for IE7 now, I am going to install the IE6 virtual PC to get a IE6 view, some how I feel like its going to be bad.

Anyways, more help would be really appreciated. Thanks!

tnederlof
Offline
Regular
Last seen: 12 years 13 weeks ago
Timezone: GMT-1
Joined: 2007-09-11
Posts: 18
Points: 0

Ok, I was able to fix the

Ok, I was able to fix the menus. At this point the site looks perfect in Firefox and IE7. However, when I load it in IE6, the menu bar, three boxes, and bottom bar are all out of place. I used the holly hack to make it work in IE7 but it makes them go out of place for IE6. Any suggestions?

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 22 weeks 3 days ago
Kansas City Metro
Timezone: GMT-7
Joined: 2007-10-18
Posts: 188
Points: 0

Some things to look

Some things to look at:

Your list doesn't look right to me in Firefox. I would check out Listamatic; look at some of the horizontal lists, which work without hacks: http://css.maxdesign.com.au/listamatic/

I would probably break up that background menu image (menu.jpg) into one piece, instead of having the 5 backgrounds within one image, and then use it as a background for each list/menu item. That would probably be easier to work with. I hope that makes sense.

One problem you might run into for IE6 that I've encountered before, is that spaces between list items can cause spacing problems. So, your code might do better like:


  • Item 1
  • item 2
  • Item 3


Your menu class selector would be better as an id selector: #menu.

~Soundscape
www.kenlange.com

tnederlof
Offline
Regular
Last seen: 12 years 13 weeks ago
Timezone: GMT-1
Joined: 2007-09-11
Posts: 18
Points: 0

Ok, here is my new code.

Ok, here is my new code. Great idea for the menu, I have almost got it, except I cannot seem to be able to move the text over to the left.

body {text-align: center;background-color: #c1dadf; color: #030000; }

img { border-style: none; }

.wrapper { margin-left: auto;
margin-right: auto;
width: 858px;
height: 600px;background-image: url(img/bg2.jpg);background-repeat: no-repeat;}
.bannerpic {height:68px;width:801px;margin-left: 6px;position: relative;left: 5px;
background: url(img/header.jpg) no-repeat;
position: relative;
*left:-20px ;}

.menu {height:52px;
width: 801px;
margin-left: 11px;

position: relative;
*left:-23px ;
}
.content {width: 801px;height: 386px;
position: relative;
left: 5px;
margin-left: 5px;

*left:-20px ;
}
.mainbox{
width: 506px;height: 338px;
position: relative;

margin-left: 39px;float: left;
background: url(img/mainbox.jpg) no-repeat;

}

.box1 {
width: 204px;height: 107px;background: url(img/box1.jpg) no-repeat;float: right;margin-right: 40px;
clear: right;}
.box2 {
width: 204px;height: 107px;background: url(img/box1.jpg) no-repeat;float: right;
margin-right: 40px;margin-top: 8px;
clear: right;}

.box3 {
width: 204px;height: 107px;background: url(img/box1.jpg) no-repeat;float: right;
margin-right: 40px;margin-top: 8px;
clear: right;}

.footer h1 {
font: 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;

background-position: 0;
text-align: center;
padding: 4px 0 0;
margin: 16px auto auto;
*margin-top: -5px;

}

/* @group Bottom Navigation */

#navlista
{


font: 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;

background-position: 0;
text-align: center;
padding: 2px 0;
color: #030000;
margin: 0 auto auto;
*margin-top: -18px;

}

#navlista ul
{

list-style: none;
text-align: center;
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
}

#navlista li
{
border-right-style: solid;
display: inline;
text-align: center;
margin: 0 0px;
border-right-width: 1px;
padding-right: 5px;
}

#navlista li.last {
border: none;
}

#navlista li a
{
padding: 1px 7px;
color: #030000;
text-decoration: none;
text-align: center;

}

#contentpic {
float: left;
}

/* @end */
ul#navlist
{
margin-left: 0px;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 3px 0px; }

#navlist a:link, #navlist a:visited
{
color: #000000;

text-decoration: none;
background-image: url(img/button.jpg);
padding-left: 5em;
padding-bottom: 1em;
background-repeat: no-repeat;
padding-top: 0px;
padding-right: 1em;}

#navlist a:hover
{
color: #0505ff;

text-decoration: none;
}

.bottombox{
width: 725px;height: 36px;background-image: url(img/bottombox.jpg);

margin-left: 39px;clear: both;top: 8px;
position: relative;
*left:-20px ;
}

.line {
border-top: 2px dotted #aa0100;
width: 700px;
margin-left: 60px;
margin-top: 16px;
position: relative;
*margin-left:-30px ;
}

.bigpic {
width: 206px;
height: 50px;
margin-left: 45px;
padding-top: 0;
position: relative;
top: 15px;
background: url(img/bigpic.jpg) no-repeat;
}

.bannerpic img {
width: 206px;
height: 45px;
margin-top: 15px;
text-align: left;
float: left;
margin-left: 50px;
}

.bannerpic h1 {
float: right;
margin-top: 45px;
margin-right: 25px;
font: small Georgia, "Times New Roman", Times, serif;
}

.bannerpic h1 a {
color: #030000;
}

.bannerpic a {
border-style: none;
color: #f1f1f1;
border: none;}

Altus Designs - Design

@import "styles.css";

Altus Designs Need help? Email us at [email protected]

tnederlof
Offline
Regular
Last seen: 12 years 13 weeks ago
Timezone: GMT-1
Joined: 2007-09-11
Posts: 18
Points: 0

I still cannot figure this

I still cannot figure this menu out, any ideas? Thanks

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 22 weeks 3 days ago
Kansas City Metro
Timezone: GMT-7
Joined: 2007-10-18
Posts: 188
Points: 0

body { text-align:

body { text-align: center; background-color: #c1dadf; color: #030000; }

img { border-style: none; }

.wrapper {
margin-left: auto;
margin-right: auto;
width: 858px;
height: 600px;
background-image: url(http://www.altusdesigns.com/new/img/bg2.jpg);
background-repeat: no-repeat;
}

.bannerpic {
height:68px;
width:801px;
margin-left: 6px;
position: relative;
left: 5px;
background: url(http://www.altusdesigns.com/new/img/header.jpg) no-repeat;
position: relative;
}

.content {
width: 801px;
height: 386px;
position: relative;
left: 5px;
margin-left: 5px;
}

.mainbox {
width: 506px;
height: 338px;
position: relative;
margin-left: 39px;
float: left;
background: url(http://www.altusdesigns.com/new/img/mainbox.jpg) no-repeat;
}

.box1 {
width: 204px;
height: 107px;
background: url(http://www.altusdesigns.com/new/img/box1.jpg) no-repeat;
float: right;
margin-right: 40px;
clear: right;
}

.box2 {
width: 204px;
height: 107px;
background: url(http://www.altusdesigns.com/new/img/box1.jpg) no-repeat;
float: right;
margin-right: 40px;
margin-top: 8px;
clear: right;
}

.box3 {
width: 204px;
height: 107px;
background: url(http://www.altusdesigns.com/new/img/box1.jpg) no-repeat;
float: right;
margin-right: 40px;
margin-top: 8px;
clear: right;
}

.footer h1 {
font: 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
background-position: 0;
text-align: center;
padding: 4px 0 0;
margin: 16px auto auto;
}

/* @group Bottom Navigation */

#navlista {
font: 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
background-position: 0;
text-align: center;
padding: 2px 0;
color: #030000;
margin: 0 auto auto;
}

#navlista ul {
list-style: none;
text-align: center;
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
}

#navlista li {
border-right-style: solid;
display: block;
text-align: center;
margin: 0;
/*border-right-width: 1px;*/
padding-right: 5px;
}

#navlista li.last {
border: none;
}

#navlista li a {
padding: 1px 7px;
color: #030000;
text-decoration: none;
text-align: center;
}

#contentpic {
float: left;
}

/* @end */

/* NEW NAVIGATION
----------------------*/

#navcontainer ul
{
margin: 0;
padding-top: 20px;
list-style-type: none;
text-align: left;
font-family: arial;
font-size: 14px;
height: 82px;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
margin: 0 0 0 10px;
padding: 0 40px 5px 40px;
color: #000;
background: url(http://www.altusdesigns.com/new/img/button.jpg) bottom right no-repeat;
width: 147px;
height: 82px;
}

#navcontainer ul li a:hover
{
color: #0505ff;
background: url(http://www.altusdesigns.com/new/img/button.jpg) bottom right no-repeat;
width: 147px;
height: 82px;
}

/* END NEW NAVIGATION
----------------------------*/

.bottombox {
width: 725px;
height: 36px;
background-image: url(http://www.altusdesigns.com/new/img/bottombox.jpg);
margin-left: 39px;
clear: both;
top: 8px;
position: relative;
}

.line {
border-top: 2px dotted #aa0100;
width: 700px;
margin-left: 60px;
margin-top: 16px;
position: relative;
}

.bigpic {
width: 206px;
height: 50px;
margin-left: 45px;
padding-top: 0;
position: relative;
top: 15px;
background: url(http://www.altusdesigns.com/new/img/bigpic.jpg) no-repeat;
}

.bannerpic img {
width: 206px;
height: 45px;
margin-top: 15px;
text-align: left;
float: left;
margin-left: 50px;
}

.bannerpic h1 {
float: right;
margin-top: 45px;
margin-right: 25px;
font: small Georgia, "Times New Roman", Times, serif;
}

.bannerpic h1 a {
color: #030000;
}

.bannerpic a {
border-style: none;
color: #f1f1f1;
border: none;
}

Altus Designs - Design


@import "styles.css";

Altus Designs Need help? Email us at [email protected]

~Soundscape
www.kenlange.com

tnederlof
Offline
Regular
Last seen: 12 years 13 weeks ago
Timezone: GMT-1
Joined: 2007-09-11
Posts: 18
Points: 0

Thank you so much for your

Thank you so much for your help. I have gotten everything to work in IE6 and IE7 with alot of tweaking, it will be much faster next time Smile One little thing, could you point out where I can adjust the menu text hight. I want it to be up 5px from the black lines of the buttons.

www.altusdesigns.com/new

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 22 weeks 3 days ago
Kansas City Metro
Timezone: GMT-7
Joined: 2007-10-18
Posts: 188
Points: 0

Change the bottom padding of

Change the bottom padding of #navcontainer ul li a

It's currently up 5px, so to get it up 5 more pixels, change the 5px below to 10px. I used shorthand, and the order for margin and padding shorthand is clockwise from the top, so TOP RIGHT BOTTOM LEFT. 0 values don't need the measurement type defined.

#navcontainer ul li a
{
padding: 0 40px 5px 40px; /* The order is clockwise from Top - Top Right Bottom Left */

~Soundscape
www.kenlange.com