PDA

View Full Version : Resolved Website looking fine in Chrome, safari, firefox, opera, but NOT in IE!!!



cayoub88
Jul 14th, 2010, 03:50 PM
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. (http://www.jazma.com.au)

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

abduraooft
Jul 14th, 2010, 03:53 PM
Start with fixing errors in your markup, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jazma.com.au%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

cayoub88
Jul 14th, 2010, 04:02 PM
Sweet, that's done http://validator.w3.org/check?uri=http://www.jazma.com.au/&charset=(detect+automatically)&doctype=Inline&group=0.

Still looks way off on IE... what do u reckon i should do?

abduraooft
Jul 14th, 2010, 04:06 PM
Now add
*{margin:0;pading:0;} into your CSS to remove all browsers specific default values of margins and paddings from all elements.

cayoub88
Jul 14th, 2010, 04:46 PM
Wow how can i thank you enough!!

well, there you have it ladies and gentlemen, my 2nd website ever :D

(edit: how do i mark the post solved??)

abduraooft
Jul 14th, 2010, 05:19 PM
(edit: how do i mark the post solved??)
See the bottom line at http://www.codingforums.com/postguide.htm