background css problem

@realtime158Jan 30.2007

If you go to this url here.

~~[url]~~http://www.realdealpokertour.com/dev/[/url]

Look at the Canadian flag then move your eyes towards the right you will see in Internet Explorer its sticking out a bit.

In firefox 2 it works fine no problems. Any ideas of what I need to change in the css.

the css file is located here

~~[url]~~http://www.realdealpokertour.com/dev/styles.css[/url]
~~[url]~~http://www.realdealpokertour.com/dev/nav.css[/url]
~~[url]~~http://www.realdealpokertour.com/dev/borders.css[/url]

Thanks for everybody that helps.

to post a comment

CSS

13 Comments(s) _↴

@WebJoelJan 30.2007 — #I am not understanding the problem. I do see that in Firefox, your "Poker in the Caribbean" image is absent. -Just a bit, black hole where the image should be. And the absence of what in IE looks like a 2 or 3-pixel wide border-right(??).

What 'to the right of the Canadian flag' am I supposed to be looking for?

It probably doesn't really do any hurt, but you have some irregular CSS syntax:

#footer

{

width: 700px;

height:80px;

float: left;

margin: 5% 0px 0px 0px;

[B]background:url(images/footer/realdeal.jpg);[/B]

}

#content

{

width: 700px;

height:900px;

[B]background: #2B6545;[/B]

}

When 'just the image' is used, you should write this "background-image:url();"

When just the background color is used, you should write as "background-color:#xxxxxx;" (or "background-color:rgb(xx,xx,xx)").

You can abbreviate to "background:" when you combine declarations, e.g.:

"background:#ececec url() repeat-none;" (combining background-color, URL and repeat used here).

It is possible that if these styles are not adhered to, some browser might disregard certain parts of your CSS(??)

@realtime158authorJan 30.2007 — #if you see in Internet Explorer you will se on the right edge the green is sticking out. But in firefox no problems. Any ideas what it could be.

Thanks WebJoel

@WebJoelJan 30.2007 — #if you see in Internet Explorer you will se on the right edge the green is sticking out. But in firefox no problems. Any ideas what it could be.

Thanks WebJoel[/QUOTE] possibly some CSS that is written 'incorrectly', is not being obyed. See my notes above. ? (I'll still reading your CSS files)...

edit:

-Is this okay?

#navlist {

list-style: none;
  margin: 10px auto;
  width: 50em;
  height: 1.6em;
  [B]margin:0,0,0,0;[/B]

I do not believe that "commas" are required. And since all four cardinal edges are "zero", you could just write this 'shorthand' like "margin:0;" and say the same thing as "margin: 0 0 0 0;" (<--the more typical way to write it, without commas).

@realtime158authorJan 30.2007 — #Keep me posted. Thanks for your help by the way much appreciated

@WebJoelJan 30.2007 — #Keep me posted. Thanks for your help by the way much appreciated[/QUOTE]
Check those. I'll check here again tomorrow AM. I think it's just some minor CSS mal-interpretation causing this.

GREAT image, that 'Caribbean' image. I went to the Mexican Riveria a few years ago, -the view out our balcony was almost exactly the same as your image. -Brought a tear to my eye, -fond rememberances, etc. ?

g-nite.

@realtime158authorJan 30.2007 — #My friend has been there that is my next stop. I always end up in Europe most of the time.

@realtime158authorJan 30.2007 — #I made those changes nothing changed. Just to keep you updated.

@WebJoelJan 30.2007 — #I made those changes nothing changed. Just to keep you updated.[/QUOTE] I'll check it again in a little while (just have to finish up some client stuff...)...

@WebJoelJan 31.2007 — #I think I found the problem... (corrected file here, [B]corrections are in BOLD)[/B] I also made your URLs be absoslute-path, so that they work for me 'offline'...

* {

border: 0;

margin: 0;

padding: 0;

}

body {

font-family: Verdana, Arial, Helvetica, sans-serif; color:black;

font-size: 12px;height:100%;

background-color:black;

}

td {

font-family: Arial, Helvetica, sans-serif;

}

th {

font-family: Arial, Helvetica, sans-serif;

}

.centerdiv {width: 730px; border: none; margin:0 auto;}

.centerdivContent {width: 664px; border:0; margin:0 auto;}

#header {

width: 700px;

height: 164px;

background-color:red;

background-image:url(http://www.realdealpokertour.com/dev/images/header/topback.jpg);

}

#footer

{

width: 700px;

height:80px;

float: left;

margin: 5% 0;

background-color:000;

background-image:url(http://www.realdealpokertour.com/dev/images/footer/realdeal.jpg);

}

#content

{position:relative;

width: 700px;

height:900px;

background-color: #2B6545;

}

/* MAIN FLASH BANNERS */

.boxFlash {

width:684px;

height: 200px;

border: 0; margin:0 auto;

background: #000000 url(http://www.realdealpokertour.com/dev/images/corners/bannerbottom.gif) no-repeat left bottom;

}

.boxFlash img {

padding: 9px 5px 5px 5px;

}

.boxFlash p {

background: url(http://www.realdealpokertour.com/dev/images/corners/bannerTop.gif) no-repeat left top;

padding: 0px 3px 0px 3px;

}

/* Layer Positioning */

#top {

[B]width:698px;[/B] /* used to be 700px */

}

#top2 {

[B]width:698px;[/B] /* used to be 700px */

}

.realdealBox {

width: 69%;

height: 150px;

float: left;

margin: 5px 5px 5px 7px;

background-image: url(http://www.realdealpokertour.com/dev/images/boxes/realdeal.jpg)

}

.realdealBox p

{

padding: 40px 0 0 13px;

color:#FFFFFF; font-style: normal; font-size: 11.5px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;

}

.newsBox {

width: 196px;

height: 380px;

float: right;

margin: 2px 2px 0px 0px;

background-image: url(http://www.realdealpokertour.com/dev/images/boxes/newsevents.gif)

}

.newsBox p

{

padding: 35px 0% 0% 23px;

color:#FFFFFF; font-style: normal; font-size: 11.5px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;

}

.triobox {

width:490px;

height: 150px;

float: left;

margin: 0px 0px 0px 5px;

}

.triobox p

{

color:#FFFFFF; font-style: normal; font-size: 11.5px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;

margin: 5px 5px 5px 1px;

}

.triNews {

width: 32%;

height: 214px;

float: left;

margin: 5px 5px 5px 2px;

background-image: url(http://www.realdealpokertour.com/dev/images/boxes/trinews.jpg)

}

.triNews p

{

color:#FFFFFF; font-style: normal; font-size: 11.5px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;

}

.triSched {

width: 32%;

height: 214px;

float: left;

margin: 5px 5px 5px -1px;

background-image: url(http://www.realdealpokertour.com/dev/images/boxes/trisched.jpg)

}

.triSched p

{

color:#FFFFFF; font-style: normal; font-size: 11.5px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;

}

.triAff {

width: 32%;

height: 214px;

float: left;

margin: 5px 5px 5px 1px;

background-image: url(http://www.realdealpokertour.com/dev/images/boxes/triaff.jpg)

}

.triAff p

{

color:#FFFFFF; font-style: normal; font-size: 11.5px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;

}

.classbtm

{

height:86px;

width: 700px;

background:#000 url(http://www.realdealpokertour.com/dev/images/footer/bottomcruve.gif);

}[/QUOTE] Your DIVs "#top" and "#top2" were 700px each, -but they 'line-wrap' with a virtual 'white-space' before "top2", therefore, they occupied 701px or 702px(?) wide. I reduced them both by 2-px and the problem of the mysterious green line in "#content" (the background-color) in IE goes away. It is not visible in Fx either.

I re-wrote a few things semantically in your CSS here ("styles.css" is the affected file. I didn't have to touch your other two CSS files). Use this to replace yours. Let me know if this works. ?

@realtime158authorJan 31.2007 — #I looked here and those areas were fixed

http://www.realdealpokertour.com/dev/styles.css

make sure you are in the dev folder.

Thanks for the help so much. But take a look at that and tell me anything wrong there.

@WebJoelFeb 01.2007 — #I looked here and those areas were fixed

http://www.realdealpokertour.com/dev/styles.css

make sure you are in the dev folder.

Thanks for the help so much. But take a look at that and tell me anything wrong there.[/QUOTE]
Yes, but "width:auto;" isn't doing it. Either there needs to be an explicit "<br />" between the two, or a clearing DIV maybe, -or a better 'numeric' width declaration. What I was seeing, was something like:

[code=html]--------------
 --------------[/code]

Whereby the top line is "#top" and the bottom line is "#top2". Both #top and #top2 were 700px, but note the '[U]whitespace[/U]' that begins the second line. [U]This[/U] was causing the whole container to shift 1-or-2px wider in IE, to approx. 701 (or 702)px wide, -revealing the background-color of the content container behind it...

I still see the 1-px green background 'edge' peeking out from behind. Changing "#top" and #top2" to have "width:698px;" instead of "700px;" seemed to correct this. "Width:auto;" doesn't seem to have fixed this...

-What are these "#top" and "#top2" for, anyway? Spacers, maybe? They are just empty DIVs, -right? You could acheive the 'vertical space' more easily with a 'margin-top' statement on the next full-width DIV (or image, if not enclosed in DIV) and eliminate the empty DIVs...

And this:

[I]a:link { color:#FFFFFF;text-decoration:none;}

a:active { color:#FFFFFF;text-decoration:none;}

a:visited { color:#FFFFFF;text-decoration:none;}

a:hover { color:#FFFFFF;text-decoration:underline;} [/I]

is not in the correct order. Yoou need it to be:

[I]a:link { color:#FFFFFF;text-decoration:none;}

a:visited { color:#FFFFFF;text-decoration:none;}

a:hover { color:#FFFFFF;text-decoration:underline;}

a:active { color:#FFFFFF;text-decoration:none;}[/I]

Think "LVHA", -or "LoVeHAte". This way, you won't be getting the 'active' state before the 'visited' state, whihch is what you have now. You have to 'hover' over it before you make it 'active' (similar to "mouseDown"), then you have 'visited' it and that color will be the overriding one per that page visit, over-riding "l", which is any UN-visited link.. ? I do note that you have all state of your links being 'the same color', so this change is probably moot but your underline effect will seen 'out of whack'...

(edit comment, -not required) ?

@realtime158authorFeb 01.2007 — #Thanks so much for pointing these errors out. I am just learning Advanced CSS coming from the old table method. I want to change towards the future not the past.

@WebJoelFeb 01.2007 — #Thanks so much for pointing these errors out. I am just learning Advanced CSS coming from the old table method. I want to change towards the future not the past.[/QUOTE]
-And you're doing an excellent job of it too. ? I only see one 'warning', -Line 36: "no [U]alt=""[/U] tag". :rolleyes:

I'm on Linux this morning, -and seem to be seeing that the text is not padded against the top of those three side-by-side 'boxes'. They are as if 'typed over top of' the headers of each... My editor is on the other drive so I'll have to switch over to test it. I didn't recall seeing this any other time before now...

No 'green line' seen here though, but my browser is Firefox (on Linux) and that wasn't showing the problem.

Also in #CSS _↴

Links with CSS IE 6 Div Problems Need Help With CSS. Very Basic.

Success!

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

Tweet This

background css problem

13 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

background css problem

13 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #CSS _↴