CSS - Ie ~ Div Bg Color Is Wider Than The Element It Contains

Has anyone else experienced this? I have a div with a specified width of 503px. If I fill it with text, after about a screens worth it's physically 506px in IE (it's fine in every other browser).

Anyone any ideas what could be causing this, or a solution to this problem?

Many thanks

hi.
I built a flash website with a resolution of 1920x1200.
The background of this web is 1920x1200 and my actual website with menu and stuff is in the middle of it with a resolution of 1024x768.
How can i upload this website and in the browser to shown always the middle of the flash?
I hope this is possible.
thanks!

I have a problem with this site - shop dot meenola dot com (Sorry - i am a new member and therefore cannot post a proper URL) - In FF the page is always scrollable to the right although there is nothing there and as far as i can tell the HTML ends in the initially viewable area.
Not usually a problem for most - but using a macbook scrollpad, you tend to fly "offscreen" rather easily.
Have tested in Chrome, IE, Opera and Safari - all of which display correctly (The page ends when the HTML does).

Any ideas?
Thanks
/Adam

This is the line in my index.html:
PHP Code:
<PRE class=yup>blah blah blah and more blah blah blahblah more blah blah blah yes yes blah blah</PRE> 





This is my PRE code in style.css:
PHP Code:
 PRE {
    BORDER-RIGHT: #2f6fab 1px dashed; 
    PADDING-RIGHT: 1em; BORDER-TOP: #2f6fab 1px dashed; 
    PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; BORDER-LEFT: #2f6fab 1px dashed; 
    COLOR: #000000; LINE-HEIGHT: 1.1em; PADDING-TOP: 1em; 
    BORDER-BOTTOM: #2f6fab 1px dashed; BACKGROUND-COLOR: #f9f9f9;
    width: 90%;
}
PRE.yup {
    COLOR: #000000;
    FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
    FONT-SIZE: 12px;
    text-align: left;
    width: 80%;
    margin: 12px auto;
} 





The PRE tag is in a table and i want the long text the same lenght as the short text, but i have no clue how to do it. Any ideas?

Hi,

My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner).

Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page.

I have tried various approaches and read up on positioning but so far have not been able to do it using css.

Any help is much appreciated.

Jim

I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover.

Here is an example:


Code:

<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>

.link a { some link height }

.link a span { display: none; }

.link a:hover span {
  position: abolute;
  top: (some link height * the number of links);
  background-image: (some image url)
  width: (image width)
  height: (image height)
}

Appearance:

------
Link1
Link2
Link3
Link4
-------
-------
Rollover Image to appear here
-------

The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed.
IE
------
Link1
sublink1
sublink2
Link2
Link3
Link4
-------

will break my scheme.


Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang?

If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that.

thanks.

Here's the code: Code:

<html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body		{ margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div		{  }
table		{ width: 100% }
.sttable	{ background-color: #000080 }
tr		{  }
td		{ vertical-align: top }
.sttd		{ font: bold 12px Arial #FFFFFF }
</style>
</head>

<body>
<table class="sttable">
   <tr>
      <td class="sttd">Catalog&nbsp;>&nbsp;Categories</td>
      <td class="sttd">Cart&nbsp;Total:&nbsp;&nbsp;$&nbsp;0.00</td>
      <td class="sttd">Date</td>
   </tr>
</table>
</body>
</html>

Would someone please tell me why the color of the text isn't rendering white?

Hi,

Instead of organising an image sprite as follows:

image image image
image image image

i'm wondering if there are any negative effects to organising the images in a linear fashion as follows

image image image image image image

I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites?



Thanks

Just like the title says, the child is wider than the parent, and i want it automatically centered, so t hat the centers of both divs are inline with each other.

I tried the Code:

margin 0px auto;

which works if the child is smaller, but it doesn't seem to work in this case, any other ideas?

I'm making a game that revolves around four teams. For developmental purposes, I made the team colors blue, red, green, and yellow. And now I'm at the stage where I'm designing a layout. The theme is set in the 1800's, and my first idea was to have a different color scheme for each team (in accordance with their team color,) but my layouts ended up having nothing to do with the 1800's -- just colors (I want to give a very real effect to this website.) So I tried making a universal layout with a sort of tea-stained, burnt edges, parchment look, with a black background, but I had trouble making it tile nicely (partly the burnt edges, partly the stains in the paper.) So this is where I am. I need help designing a layout! I can change the team colors to whatever, I have beginner/intermediate photoshop skills (though, I'm quite competent,) and all suggestions are warmly welcomed!

hello,

about the well-known color warnings (and in the best interest of good accessibility practices) is setting "background-color: inherit" a proper solution? it supresses the errors, but does it solve the problem of having good contrast between different elements/the use of custom stylesheets?

i'm asking because i have a stylesheet with different classes for text which are used over different background-colors (from the parent elements). so unless i make a class for each possible application of these text styles, i don't see a way to specify a fixed background-color...

i hope i explained my issue properly...
thanks for any thoughts or suggestions on this

Can anyone explain the difference between the two? For example, what is the difference between:

this:
element element {}
div p { }

and this:
element > element { }
div > p { }

I don't understand it and have not found an explanation in tireless searching. Thx!

Hi,
Im trying to validate with CSS 3, but am getting one warning, which I really want to get rid of:

Code:

body {
  color: #000000;
  background-color: #ffffff;
  font-family: sans-serif;
  font-size: 15px;
}
#header {
  clear: both;
}
#topmenu {
  width: 100%;
  height: 30px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 1px;
  clear: both;
}
#topmenu a {
  width: 150px;
  height: 28px;
  color: #ffffff;
  background-color: #990000;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #ffffff;
  padding-top: 2px;
  float: left;
}
#topmenu a:hover {
  width: 150px;
  color: #990000;
  background-color: #ffffff;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #990000;
  float: left;
}

#body {
  color: #000000;
  background-color: #ffffff;
  margin: 10px 0px 10px 0px;
  clear: both;
}
#footer {
  width: 100%;
  color: #000000;
  background-color: #ffffff;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  border-top: 2px solid #990000;
  padding-top: 5px;
  clear: both;
}
#footer a {
  color: #990000;
  background-color: #ffffff;
  font-weight: normal;
  text-decoration: none;
}
#footer a:hover {
  color: #990000;
  background-color: #ffffff;
  font-weight: normal;
  text-decoration: underline;
}








#leftmenu {
  color: #000000;
  background-color: #ffffff;
  width: 19.5%;
  padding-right: 0.5%;
  float: left;
}
#contents {
  color: #000000;
  background-color: #ffffff;
  width: 58.5%;
  padding-left: 0.5%;
  padding-right: 0.5%;
  float: left;
}
#rightmenu {
  color: #000000;
  background-color: #ffffff;
  width: 19.5%;
  padding-left: 0.5%;
  float: right;
}




.contentbreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 10px;
  clear: both;
}


.menubreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 10px;
  clear: both;
}



.footerbreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 2px;
  clear: both;
}


.menutoptitle {
  width: 100%;
  height: 26px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ffffff;
  padding-top: 1px;
  padding-left: 1px;
  padding-right: 1px;
}
.contenttoptitle {
  width: 100%;
  height: 26px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ffffff;
  padding-top: 1px;
  padding-left: 1px;
  padding-right: 1px;
}


.menu {
  width: 100%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  float: left;
}
.menu a {
  width: 98%;
  height: 19px;
  color: #000000;
  background-color: #eeeeee;
  font-weight: normal;
  text-decoration: none;
  border-bottom: 1px solid #990000;
  padding-left: 2%;
  float: left;
}
.menu a:hover {
  width: 98%;
  height: 19px;
  color: #ffffff;
  background-color: #990000;
  font-weight: normal;
  text-decoration: none;
  border-bottom: 1px solid #990000;
  padding-left: 2%;
  float: left;
}




.menucontent {
  width: 96%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  border-bottom: 1px solid #990000;
  padding-bottom: 5px;
  padding-left: 2%;
  padding-right: 2%;
  float: left;
}
.menucontent a {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: underline;
}
.menucontent a:hover {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: none;
}




.subcontentright {
  color: #000000;
  background-color: #ffffff;
  text-align: right;
}

.content {
  width: 98%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  border-bottom: 1px solid #990000;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 5px;
  float: left;
}
.content a {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: none;
}
.content a:hover {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: underline;
}



.input {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 13px;
}


.menuformcontainer {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  clear: both;
}

.menuformsubcontainer {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  clear: both;
}

.menuformlabels {
  color: #000000;
  background-color: #ffffff;
  width: 50%;
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
}
.menuformfields {
  color: #000000;
  background-color: #ffffff;
  width: 48%;
  text-align: right;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: 2%;
  float: left;
}


.menuformsubmit {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  text-align: right;
  padding-top: 2px;
  padding-bottom: 2px;
  clear: both;
}

http://jigsaw.w3.org/css-validator/...ut+with_options

Please make sure you select CSS 3 and Warnings = ALL in order to see the 32 warnings...

Thanks!
Yours sincerely,
speedbooster!

I want to change this: LIST-STYLE-TYPE: square;

I want to show a picture in the place of that square. Can this be possible?

i have strange problem with IE 8 where an element is incorrectly placed when i open an Iframe, but if the iFrame is closed and reopened the element in question is correctly placed. I don' know if this is a code problem or if it's an IE 8 issue??

i see i cannot post a url. any help without seeing the problem?

Here is the code snippet from the iframe:
Code:

<div style="margin: 0px;" id="votes">
<ul style="margin: 0px;" id="xvotes-0" class="star-rating-noh">								                            	           <li id="xvote-0" style="width: 81.25px;" class="current-rating"></>
<span id="mnmc-0">															                   <li class="one-star-noh"></li>											                     		                             <li class="two-stars-noh"></li>
<li class="three-stars-noh"></li>													                                           <li class="four-stars-noh"></li>
<li class="five-stars-noh"></li>
</li>
</ul>
</div>

I've been adding local styles to try and zero any potential problems.

i can post all css styles if noone has any ideas.

Any help would be much appreciated.

Thanks.