CSS - Windows Ie And Firefox <span> Difference - Problem!!

I have created a menu using css... but when i view it in ie it looks just about right.. but on firefox.. the width is just off... example


IE: width is fine
------------------

---------
| |
| |
| |
|______|

but in firefox it just go all the way across the screen.. arg

Code:

.navcontainer ul
{
   margin-top:         0;
   margin-left:        2;
   padding-left:       0;
   list-style-type:    none;
   font-family:        Arial, Helvetica, sans-serif;
   font-size:          12px
}

.navcontainer {
   margin: auto;
}

.navlist a {
   width: 100%;
}

.navcontainer>.navlist a {
   width: auto;
}

.navcontainer a
{
   display: block;
   padding: 1;
   width: 165;
   background-color: #003366;
   border-bottom: 1px solid #eee;
}

.navcontainer a:link, .navlist a:visited
{
   color: #EEE;
   text-decoration: none;
}

.navcontainer a:hover
{
   background-color: #369;
   color: #fff;
}

i have attached the html file here.. cause i cant upload it.

I use this in IE:

<span style="width:22"></span>

as a blank spacer. The 22 is actually calculated so it varies. Of course it does not work in Firefox. I get no spacing at all.

What is the acceptable cross browser method of doing this?

Thanks in advance.

Here's my page http://www.martcol.co.uk/Andy/

I can't get the image caption to line up in FF and IE6. I know it's something to do with the Box Model but if I get it in one, it goes out in the other....

Here's my CSS http://www.martcol.co.uk/Andy/main.css

I imagine it's only a little tweak on this but I can't seem to get it.

Thank

Martin

Hello,
I use the following css code to define the style of some tables.
However in Firefox it shows it how i want it, but in IE it doesnt display the borders. (not around the rows of the table). Code:

table.listings{
	border-collapse: collapse;
	border-style: none;
}
table.listings tr{
	border-style: solid;
	border-color: #4D3D4D;
	border-width: 1px;
}
.darkRow td{
	background-color: #4D3D4D;
	color: white;
	padding-left: 4px
}
.lightRow td{
	background-color: #BFACBF;
	color: #4D3D4D;
	padding-left: 4px;
}

I create the tables something like this: Code:

<table class="listings">
<tr class="darkRow"><td>bla</td></tr>
<tr class="lightRow"><td>bla</td></tr>
</table>

Why does it display so much different in those 2 browsers?

I created a CSS box where there's a header image & a css box under it, having 3 sides (no top border). It looks good in firefox, but can't get the box to close all the way (by meeting the header image) in explorer. There's a 2-3 px space there.

li'l help please?

Chrome and Firefox aren't styling any of the span elements I have-in IE they load fine. For example the css..I'll check back in this book I have and online to see if I can find the issue. I appreciate any help. For example heres a span I have.
Code:

.title {background-color:CCCCCC;
        font-family:Verdana;
	 margin:0px;
	 padding:0px;
	 border:2px double blue;
	 height:70px;
         width:200px;
}

the html..
Code:

<div id="menu">
     <span class="button">
       <a href="www.google.com">home</a>
     </span>
      <span class="button">
       <a href="www.google.com">home</a>
     </span>
      </div>
     <div id="content">
       <div id="sidebar">
         <p>sidebar to the right</p>
         <h2>text</h2>
         </div>
     <span class="title">
     <h2>Title of something</h2>
     </span>
         <p>some text sdfdsdsfdsf</p>
    </div>

It may be that the divs and spans are conflicting because of their properties or that they are not properly nested or named..?
Here's my whole css document.
Code:

#container {margin-left:25%;
           margin-right:25%;
}
#header {text-align:center;
        background-color:grey;
		border:solid; 
		border-width:2px;
		border-color:black;
		margin-bottom:20px;
}
#menu {background-color:white;
      border:solid;
	  border-color:black;
	  border-width:1px;
	  font-family:Verdana;
	  padding:8px;
	  margin:0px;
	  
}
.button {background-color:#FFFFCC;
         margin:3px;
		 width:90px;
		 border:solid;
		 padding:2px;
		 border-width:1px;
		 border-color:black;
		 text-decoration:none;
		 color:grey;
		 text-align:center;
		 font-family:Verdana;
		 font-size:small;
}
#content{background-color:white;
         font-family:Verdana;
		 padding-left:20px;
		 padding-top:0px;
		 padding-bottom:0px;
		 border:1px solid grey;
		 margin-right:0px;
		 margin-top:20px;
		 height:900px;
}

.title {background-color:#CCCCCC;
        font-family:Verdana;
	    border:2px double #000000;
	    height:70px;
		width:200px;
}

#footer{align:center; background-color:grey;font-size:.60em;}
#sidebar {float:right;
         width:150px; 
		 height:900px;
		 background-color:white;
		 border-left:1px double grey;
		 margin-left:0px;
		 padding:8px;
}
	  
	  
	  

Hi There

I'd really appreciate some help on this please.

I keep getting a problem on just one PC (my client's!!), where a left hand graphic disappears, but shows up on everyone else's browsers in firefox, opera, IE6 and safari. She's running Windows XP with IE6 and firefox.



Can anyone suggest why the left hand black logo panel does not show up on her system?

Any help would be most appreciated.

Thanks!

Hi.
See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should.
Please also read some comments in the code.

Code:

<html><body><center><br><br>
Why does image not force the outermost span to be at least as high as image?<br>
If the text are long enough and gets below the bottom border of image it look good though.<br><br>
NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br>
In my real application I'm using an <a href=" ...> around the outer span in examples below.<br>

<br><br>
<table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td>
	<span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;">
		<span style="display:block; float:left">
			<img src="landscape.jpg" height="40px" width="40px" alt="" border="0">
		</span>
		
		<span style="display: block; color: white;">
			Text here. 
		</span>
	</span>
</td></tr></table>

<br><br>
<table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td>
	<span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;">
			<img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left">
			Text here.
	</span>
</td></tr></table>

</center></body></html>

Hi

I'm struggeling with the following:

I have some span elements inside a td.

If I apply padding to a span then the padding is flowing outside the td (above and below the borders of the td).

Why does that happen and is there a way to make the td to autogrow to fit all the span's inside?

Se example code below

Code:

<table border="0" cellpadding="0" cellspacing="0" align="center" style="width:300px; margin-top:50px;">
<tr>
<td style="background-color:gray; text-align:center; border:1px solid black;">
<span style="margin-right:20px;">First</span>
<span style="margin-right:20px;">1</span>
<span style="margin-right:20px;">2</span>
<span style="margin-right:20px; background-color:orange; padding:10px;">3</span>
<span style="margin-right:20px;">4</span>
<span style="margin-right:20px;">5</span>
<span style="">Last</span>
</td>
</tr>
</table>

******* UPDATE *******
I found this link today:
http://css-discuss.incutio.com/?page=FormattingContexts

which says (among other things):
*************************
Only one thing impacts the vertical space between inline elements: the line height. Normally, the line height is based upon the line height for the text in that line, or the height/padding/border/margin of any replaced items. The element on a line with the largest line height or replaced height is the one to define the vertical space that line takes up.

Height, padding, border or margins on text do not impact the line height or the container height. Instead, borders, padding and margins overlap from line to line. If you want to give an inline text element some padding and border, make sure you give it some extra line height, too, or else it will overlap with whatever else is above or below it.
*************************

So does that rule mean that I have no way to make my TD autogrow in relation to the padding applied to the SPAN in the example above?
Is there any working workarounds for this...?

(alas, it's the old problem: works in Firefox, Netscape and Safari ... but not MS IE)

I'm attempting to build a series of words with a button-appearance created using span to specify background color and borders and margins.

The code checks out at the w3.org validators.
In the first 3 browsers it loooks exactly as intended. but in MS IE (v 5.2 Mac) it is completely screwed up:
- line is left justified
- individual words are right justified
- most of the cells are blank
- all cells run together (in fact they seem to be overlapped since one cannpt even guess which cell links to what other page)

relevant HTML:

<div style="text-align:center;">
<p>
<span class="buttons"><a href="aboutDG.php">About the Gypsy</a> </span>
<span class="buttons"><a href="eventFinder.php" >Find Events</a> </span>
...
<span class="buttons"><a href="helpDG.php" >Help</a></span>
<span class="buttons"><a href="http://www.thedancegypsy.com/" >Home</a></span>
</p>
</div>

and the relevant css is:

.buttons { background-color: #66FFFF;
color: #FF6600;
vertical-align: middle;
text-align: center;
padding: 3px;
margin-right: 2px;
font: bolder smaller medium Verdana, Arial, Helvetica, sans-serif;
border: #3399FF;
border-style: solid;
border-width: 2px;
white-space: nowrap;
}

url: www.thedancegypsy.com/indexBeta.php

thanx in advance for any help

I'm trying to figure out how to do something like this:
Code:

<h6>Lorem Ipsum Dolor
<span>jan 10 2006</span></h6>

And make the heading line up to the left side and the span on the right. It's close. It's lining up on the right but on the next line down rather than the same line.

Take a look.

Any bright ideas on why this is happening or how to fix it?

Thanks.

I have an alignment issue that is driving me crazy. For whatever reason, the text that I have in a <span> field is dropping too far down for the last line. Here is a screenshot of the relevant text:

Yada yada

For whatever reason I can't keep the final "Yada" from dropping farther down. It is in the following <td> field:

Code:

<td style="height: 200px; width: 150px; vertical-align: top; padding-top: 10px">

And the class for the span has the following characteristics:

Code:

.announcement_body
{
color: black;
font-size: x-small;
}

I can't see what would cause this. I've already tried adjusting the height of the <td> field without any luck. I did get consistent spacing when I added the characteristics "vertical-align: middle", but that made the distance between every line too large.

Any idea what I'm missing here?

Stephen

Hi, first of all i'm a bit new to this, but not a Compleet noob. pls be kind

Ok, so my issue is i have a type of image gallery made with spans.
I have the span tags enclosed by the <a href> tag. Spans are floating.
The reason for this is that I want to have the border change colors on hover,
wherever the pointer might be located in the span.

It works great in firefox and IE8, but i just discovered this morning, much to my dismay,
that it doesn't work in IE7 or below. of course it was the person i'm making the web
page for that pointed this out, go figure. The problem is that eventhough IE shows
that it is a link, when clicking on the image, nothing happens. text works find,
the area around image and text works fine, just not the image.

I tried searching google for a couple hours and could not find a fix that didn't involve
javascript. I'm trying to avoid JS as much as possible, and so far all has gone well.
Ok down to the nitty gritty.

I stripped down the html so that it just shows one of the spans, so if you drop the code
into notepad and save as htm you can play with it. css link is complete to my hosted css file.

honestly im not sure why im using that doc-type, i don't completely unerstand the mechanics,
i just thought for no sound reason at all that it would be better than html doc type.
xhtml 1.0 validates and css validates as 2.1.

Code:

<?xml version="1.1" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Bella Luna Gifts for the Soul - Wands</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.bellalunagifts.net/main.css" />
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;}
#menu ul {text-align:left;}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 
#menu a, #menu h2 {
font: bold 12px/16px arial, "lucida console", sans-serif; padding: 3px 2px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-container">

<div id="content">
<a href="http://www.bellalunagifts.net/rose_quartz_healing_wand.htm">
<span class="thumbnailleft"><img class="image" src="products/tn/rose_quartz_healing_wand.gif"
alt="Rose Quartz Healing Wand" width="150" /><br/><br/>Rose Quartz Healing Wand<br /></span></a>
</div>

</div>
</body>
</html>

If you just wanna glance at the css affecting the span and image, here it is.

Code:

.thumbnail {
 float: left;
 width: 150px;
 height: 210px;
 margin: 0 20px 15px 0px;
 padding: 5px;
 text-align: center;
 border-style: ridge;
 border-color: #3333FF;
 text-decoration:none;
}

a {text-decoration: none;color: #000000;}
a:link .image {border-style: none;}
a:active .image {border-style: none;}
a:hover .thumbnailleft {
 border-color: #00CCFF;}
a:hover .thumbnail {
 border-color: #00CCFF;}
a:visited {text-decoration: none;color: #000000;}
a:visited .image {border-style: none;}

and i dont know why my docs are .htm instead of html.....long time ago i had a reason
that may or may not have been valid but i should probably change to .html, yeah?

well the link to the page im working on is

http://www.bellalunagifts.net/wands.htm

this is the last immediate piece of foundation code that i need to figure out to start rolling
out the rest of the website. this is the first time i've posted for help, i really do try to
figure out stuff on my own, but am ready to throw my head through the screen right now.

and hell, if i'm goin about this in a silly way, pls tell me. i always welcome criticism.

any help would be much much appreciated. i'm gonna keep trying to figure this out, but
i'm hoping that one of you already knows what i'm doing wrong. i know my css code is probably
redundant in places, but for now i'm just working on getting things to work.
thx in advance for any reply.

I have a division containing an object for which I would like scrollbars to appear when (and only when) needed...
to do this I have set "overflow: auto" ... and it works as desired -- everywhere except Internet Explorer for Windows...
in that browser the scrollbars always appear no matter how small the object.

the relevant segment:

<div style="float:left; margin-top:1em; width:220; height: 220; overflow:auto;">
<object style=" overflow:auto;" data="/danceFeed.php?$getString" type="text/html" width=220 height=219 ;>
Set your location defaults to display local events automatically</a>
</object>
</div>

I have also tried "overflow:hidden" & "overflow: visible" (in both places); omitting it in the object; adding "overflow:hidden" to the page body (as recommended by at least one "bug site") and trying variations on the size of the object relative to the containing div. No luck.

The border of the object is clearly visible, so when the object is smaller than the available space, the (unneeded) scrollbar extends well below the bottom of the object...

any ideas for a work around?

(sorry posted to wrong forum)