/    Sign up×
Community /Pin to ProfileBookmark

Problem with CSS (I think) in IE

Copy linkTweet thisAlerts:
Sep 20.2006

Hello,

Good forum – I get the feeling I will find it very useful in future!

I’ve just started developing websites and have done this for a friend as practice:

[URL=http://www.ghostdevelopments.co.uk]Site[/URL]

[URL=http://www.ghostdevelopments.co.uk/style.css]CSS[/URL]

It is spot-on in Firefox (and validates OK as well) but in IE 6, it displays funny by showing on the left, tiling the background and by putting what looks like a 2px line between the header graphic and the menu.

I’ve been playing about with the CSS and I can’t get it to sort itself out! (stupid newbie problem most likely).

Any help much appreciated.

Mike

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@mooiSep 20.2006 — I know why your header has a gap underneath in IE.

For some reason IE doesn't like a gap between the img tag and the following tag, so for your case you must do the following:

<img id="frontphoto" src="images/header.gif" alt="" height="175" width="760"><div id="navFrame">

This means put it all on one line. It looks messy I know but it solves the problem.

Have fun ?
Copy linkTweet thisAlerts:
@MrTauthorSep 20.2006 — Thats great, thanks.

Anyone know how to get it in the centre and with a black background like firefox? ?
Copy linkTweet thisAlerts:
@KDLASep 20.2006 — Centering it:
<i>
</i>body
{text-align: center;}

div#wrap
{margin-left: auto;
margin-right: auto;
width: ###px; /* your preferred width here
text-align: left;
}
Copy linkTweet thisAlerts:
@MrTauthorSep 20.2006 — Thanks for the reply - I think my CSS file is already like that (below are my body and wrap sections in their entirety:

[CODE]body {
text-align:center;
margin: 0 auto;
padding: 0;
font-family: lucida sans;
font-size: 12px;
background: #000000 top center repeat-y;
line-height: 0px;
}

#wrap {
text-align:left;
background: url(images/tread.jpg) repeat top;
color: #FFFFFF;
margin-left: auto;
margin-right: auto;
width: 760px;
}[/CODE]

Do I need to take anything out? The above still doesn't work in IE 6 ?
Copy linkTweet thisAlerts:
@KDLASep 20.2006 — This might be the problem (in your body tag): "margin: 0 auto; padding: 0;" I think it is negating the centering.
Copy linkTweet thisAlerts:
@MrTauthorSep 20.2006 — Not it, sadly.

I'll try pulling the CSS to bits by taking most things out until it works and then re-build it. I was just hoping somebody could save me some time - thanks for having a look though KDLA, much appreciated. ?
Copy linkTweet thisAlerts:
@KDLASep 20.2006 — Take a look at these tools; they might help you:

HTML validator: http://validator.w3.org/

CSS validator: http://jigsaw.w3.org/css-validator/

CSS clean-up: http://www.cleancss.com/

Good Luck -

KDLA
Copy linkTweet thisAlerts:
@thereseSep 20.2006 — try this - see in the content section

I would strongly suggest you use a css validator also


body {

text-align:center;

[B]margin: auto;[/B]

padding: 0;

font-family: lucida sans;

font-size: 12px;

background: #000000 top center repeat-y;

line-height: 0px;

}

#wrap {

text-align:left;

background: url(images/tread.jpg) repeat top;

color: #FFFFFF;

margin: auto;

width: 760px;

}

#header {

margin: 0 0 0 0;

padding: 0;

height: 45px;

}

#header p {

width: 500px;

text-align: center;

color: #000000;

margin: 0 0 0 0;

font-size: 0.8em;

line-height: 1.2em;

}

#frontphoto {

margin: 0px;

padding: 0px;

}

#content {

width: 740px;

[B]/*remove

margin: 0 270px 20px 0px;

*/[/B]

padding: 0 10px 0 10px;

line-height: 1.7em;

text-align: justify;

}

#content h1 {

font-size: 14px;

margin: 0 0 0 0;

}

#content p {

margin: 20px 0px 20px 0px

}

.centeredImage

{

text-align:center;

margin-top:0px;

margin-bottom:0px;

padding:0px;

}

.centeredTable

{

text-align:left;

margin-left:20px;

margin-top:0px;

margin-bottom:0px;

padding:0px;

}


h3 {

font-size: 12px;

margin: 0 0 10px 0;

}

a {

text-decoration: none;

color: #286ea0;

}

a:hover {

text-decoration: underline;

color: #286ea0;

}

a img {

border: 0;

}

#footer {

clear: both;

margin: 0 auto;

padding: 10px 0 20px 0;

width: 760px;

text-align: center;

font-size: 0.9em;

}

#footer a {

text-decoration: none;

}

#footer a:hover {

text-decoration: underline;

}

.left {

margin: 10px 10px 5px 0;

float: left;

}

.right {

margin: 10px 0 5px 10px;

float: right;

}

.textright {

text-align: right;

}

.center {

text-align: center;

}

.small {

font-size: 0.8em;

}

.bold {

font-weight: bold;

}

.hide {

display: none;

}

#navFrame {

width: 760px;

height: 23px;

background: #FFFFFF;

margin: 0px;

padding: 0px;

}

#menu {

width:760px;

list-style-type: none;

margin-right: auto;

margin-left: 0;

margin-top: 0;

margin-bottom: auto;

padding: 0;

}

#menu li {

float:left;

}

#menu a {

display:block;

height:23px;

border-right:1px solid #CCC;

background:#fff url(images/bg_nav.jpg) repeat-x bottom;

color:#333;

text-align:center;

line-height:23px;

vertical-align:bottom;

text-decoration:none;

font-family: lucida sans;

font-size:11px;

}

#menu a:hover {

background:#555 url(images/bg_nav_o.jpg) repeat-x bottom;

}

.menuitem {

width:151px;

}

.picture {

padding: 1px;

border: 1px solid #99D;

}

.textsmall {

font-size: 10px

}

table.table-fancy

{

border-spacing: 0px ;

border-collapse: collapse ;

}

td.cell-fancy

{

border-color: RGB(170,170,255) ;

border-width: 1px ;

border-style: solid ;

margin: 0px ;

padding: 5px ;

font-family: lucida sans;

font-size: 10px;

}

td.cell-fancy-shade

{

border-color: RGB(170,170,255) ;

border-width: 1px ;

border-style: solid ;

margin: 0px ;

padding: 5px ;

font-family: lucida sans;

font-size: 10px;

background-color: RGB(210,219,255);

}
Copy linkTweet thisAlerts:
@MrTauthorSep 20.2006 — try this - see in the content section

I would strongly suggest you use a css validator also

[B]/*remove

margin: 0 270px 20px 0px;

*/[/B]
[/QUOTE]

Brilliant - thats cracked it, thanks!

(It already validated though ? )

Thanks to all who replied - very much appreciated.
Copy linkTweet thisAlerts:
@thereseSep 20.2006 — Brilliant - thats cracked it, thanks!

(It already validated though ? )

Thanks to all who replied - very much appreciated.[/QUOTE]


Great, glad to help.

The css code validates, but there are a lot of warnings, so I still think you should work on that area. I know its a pain, but still a good learning experience.
×

Success!

Help @MrT spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...