Hey guys,
i’m quite new to this whole web designing business, most of what i’ve learnt already was self taught.
I’ve designed a new website for a client, and as the title suggests, works totally fine with all major browsers except IE, there’s extra spacing in ie and im sick of looking at the code and not being able to solve it.
Here is the website (its online and it was fine by the client lol) - Jazma.
And here is the CSS code.
@charset "utf-8";
/* CSS Document */
/* -HOME PAGE + GENERAL LINKS */
body
{
background: url(../images/background.jpg);
background-color: #a9232a;
background-repeat: repeat-x;
border: none;
height: 100%;
}
#wrap
{
width: 820px;
margin-left: auto;
margin-right: auto;
margin-top: 17px;
}
#header_logo
{
width: 798px;
border: 1px solid #000;
border-bottom: none;
margin-left: auto;
margin-right: auto;
}
#menu
{
width: 820px;
}
#main
{
background-color: #f5f2e1;
width: 798px;
border: 1px solid #000;
border-top: none;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
}
#home_thumbs
{
width: 784px;
margin-left: auto;
margin-right: auto;
padding-bottom: 33px;
}
#main_text
{
width: 756px;
margin-left: auto;
margin-right: auto;
padding-bottom: 25px;
}
#footer
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 10px;
color: #91282e;
text-align: center;
width: 798px;
background-color: #f5f2e1;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
border: 1px solid #000;
}
.footer_links
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-size: 10px;
color: #91282e;
text-decoration: none;
}
.footer_links:hover
{
text-decoration: underline;
}
h3
{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: lighter;
}
h4
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #91282e;
}
h5
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #957548;
line-height: 17px;
}
.h5_red
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #91282e;
}
.red_links
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #91282e;
text-decoration: none;
}
.red_links:hover
{
text-decoration: underline;
}
img
{
border: none;
}
/* - - - SHOE SELECTION - - - */
#selection
{
width: 714px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 100px;
border-top: 2px solid #b8996d;
border-bottom: 2px solid #b8996d;
text-align: center;
padding-top: 40px;
padding-bottom: 30px;
}
#brands_selection
{
padding: 20px;
padding-top: 0px;
padding-bottom: 5px;
}
#flash_gallery
{
width: 752px;
height: 443px;
padding: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.gallery_box
{
margin: 0px;
width: 750px;
height: auto;
}
.gallery_box_text
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #a4865b;
line-height: 17px;
float: right;
}
/* - - - CONTACT - - - */
#contact_us_text
{
width: 328px;
}
#map
{
width: 291px;
float: right;
padding-right: 7px;
}
#map_img
{
border: 1px solid #91282e;
}
Any help would not only fix my huge issue, but also teach me for future work :)
Thanks
C