And another IE7 issue - looks great FF/Opera
Posted: 10 June 2008 03:34 PM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2008-06-10

I have never done this before, but I did a lot of reading about coding in CSS and put it together. I bug checked it in W3C and everything came back clean, except a couple elements I’d added to play around with later. It’s only one piece (the main nav) that’s giving me issues. I do have padding on it, but I also have padding on the body section, so I have no idea why one looks ok and the other doesn’t.

atlantatalentum.com is the site, I think you can view source and get the html. Here’s my css, i’m aware the scrollbars don’t work, the rest checked clean. What am I doing wrong?

@charset "utf-8";

/* Page Styling */

{
    margin
0px;
    
padding0px;
}

html {
    scrollbar
-face-color#99b;
    
scrollbar-arrow-color#fff;
    
scrollbar-highlight-color#fff;
    
scrollbar-shadow-color#99c;
    
scrollbar-3dlight-color#000;
}


body {
    background
#7a3233 url(images/Left-Side-Border.jpg) left top repeat-x;
    
z-index1;
    
margin0px auto;
    
font-familyGeorgiaCalisto MTGaramondserif;
    
floatinherit;
}


div
.layoutbox {
    width
760px;
    
margin0px auto;
    
}


    
/* Styling */

div#header {
    
width:645px;
    
height:213px;
    
font-size10px;
    
text-alignleft;
    
clearboth;
    
margin0px;
    
color#000000;
    
background-imageurl(images/Header.jpg);
    
background-repeatno-repeat;
}

div
#nav {
    
positionabsolute;
    
top213px;
    
width159px;
    
height462px;
    
font-size10px;
    
text-alignleft;
    
padding0px 40px 40px 5px;
    
clearboth;
    
margin0px;
    
color#000000;
    
background-imageurl(images/Navigation.jpg);
    
background-repeatno-repeat;
    
z-indexauto;
        
}

div
#body {
    
top213px;
    
width451px;
    
height462px;
    
fontnormal 16px Georgia"Calisto MT"Garamond;
    
text-alignjustify;
    
text-indent20px;
    
clearboth;
    
margin0px 0px 0px 159px;
    
color#000000;
    
background-imageurl(images/body.jpg);
    
background-repeatno-repeat;        
}
    
    
div
#footer {
    
top676px;
    
text-alignleft;
    
clearboth;
    
margin0px 0px 0px 26px;
    
width584px;
    
background-color#7A3233;
}

#footer a:visited {
    
color#e8d8ca;
}

.Heading
{
    padding
0px 0px 0px 0px;
    
margin0px;
    
fontbold 20px HANA"Copperplate Gothic Light"Garamondsans-serif;
    
text-transformuppercase;
    
color#000000;
    
text-alignleft;
    
text-decorationunderline;
}

.body_text
{
    padding
0px 15px 0px 0px;
    
margin0px;
    
font15px Georgia"Calisto MT"Garamondserif;
    
text-transformnone;
    
color#000000;
    
text-alignjustify;
    
text-decorationnone;
}

.mailto a:linka:visiteda:activea:hover{
    text
-transformnone;
    
}

a
:link { 
    font
bold 12px HANA"Copperplate Gothic Light"Garamondsans-serif;
    
text-transformuppercase;
    
text-decorationnone
    
color#000000;
    
}
a
:visited { 
    font
bold 12px HANA"Copperplate Gothic Light"Garamondsans-serif;
    
text-transformuppercase;
    
text-decorationnone
    
color#4b1515;
    
}
a
:hovera:active { 
    font
bold 12px Georgia"Calisto MT"Garamondserif;
    
text-transformuppercase
    
text-decorationunderline
    
color#000000;
    
}

Profile
 
 
Posted: 10 June 2008 11:10 PM   [ Ignore ]   [ # 1 ]
Jr. Member
RankRank
Total Posts:  38
Joined  2007-09-03

ShadowFax - I looked at your site in both IE and in FF.  I can see the problem.  Having looked at your HTML code the first thing that occurred to me was that perhaps it was more complicated than really necessary for the end effect that you appear to want.  But perhaps I am wrong there.

In any case, your first step should be to get developer toolbars for both IE and FF.  Start off with the
, use the option to outline block level elements and show element id/class information.  Use these features to confirm that the effect as rendered is the one you wanted.  Even if you are you might find that there is an easier way to deliver it.

With this done use the IE toolbar to do the same thing.  It is not nearly as good as FF but even so it should help you identify the problem more accurately.

Profile
 
 
Posted: 21 December 2010 12:59 AM   [ Ignore ]   [ # 2 ]
Jr. Member
RankRank
Total Posts:  42
Joined  2010-12-14

use css3please.com it will shorten your code time greatly.

Profile
 
 
Posted: 01 February 2011 06:13 AM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  12
Joined  2011-01-17

There are three reasons for this:

Profile
 
 
Posted: 20 February 2011 03:09 PM   [ Ignore ]   [ # 4 ]
Newbie
Rank
Total Posts:  23
Joined  2011-01-06

If you don’t test your pages using different screen resolutions, your page may be stretched to fit a large screen, or be cropped to fit a small screen.

Profile