|
CSS - Span Width Problem With Firefox.
Hello all!
I've problem with firefox rendering's of span tag, the problem is in the width definition, the code is this: Code: <span style="width:100%; background:red">My name is Danny!</span> IE show me a 100% red row with the text instead Firefox show me only text with the backgroud color. Why this? is a Firefox bug or is not possible to assign width definition to the span tag?! Similar TutorialsI 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. I've quickly created a small website for a friend of mine and it's the first time I've used <div> and <span> tags. It probably shows , because now it's a mixture of all kinds of layout methods. But anyway, it works fine in IE (what a lovely tolerant browser) but it messes up in Firefox. Have a look he www.duikeninegypte.nl The block text in the left column in the middel shows up fine in IE but is moved to the right in Firefox. Both pieces of text are defined in another file, so here it concerns the left part (_HOMEDUUR) and the middle part (_HOMEBODY). Why does it work in IE but not in Firefox? Cheers for any feedback! Gurt PHP Code: echo " <center><div id=\"backholder\" style=\"position: relative; height: 576px; width: 720px;\"> "; // background image echo " <IMG SRC=\"images/homeback.jpg\" style=\"position:absolute; left:0; top:0;\" border=\"0\" title=\"\"> "; //start navigation menu echo " <IMG SRC=\"images/nav-home-sel.gif\" style=\"position:absolute; left:5; top:10;\" border=\"0\" title=\"\"> "; echo " <a href=\"inhoud.php\"><IMG SRC=\"images/nav-inhoud-def.gif\" style=\"position:absolute; left:5; top:70;\" border=\"0\" title=\"\"></a> "; echo " <a href=\"bestel.php\"><IMG SRC=\"images/nav-bestel-def.gif\" style=\"position:absolute; left:5; top:130;\" border=\"0\" title=\"\"></a> "; // end navigation // left panel echo " <span style=\"position: absolute; left: 20; top: 190;\"> "; echo " <table width=\"200\" border=\"0\"><tr><td width=\"100%\"><font color=\"#ffffff\">"._HOMEDUUR."</font></td></tr></table> "; echo " </span> "; // body panel echo " <span style=\"position: absolute; left: 235px; top: 90px;\"> "; echo " <table width=\"480\" border=\"0\"><tr><td width=\"100%\">"._HOMEBODY."<br><br>"._HOMECREDITS."</td></tr></table> "; echo " </span> "; echo " </div></center> "; As simple as the problem sounds, Im completely puzzled by what could be going wrong. The problem is if I set the width of my div too 100%, it wont show up in Firefox. It works fine if I define it in pixels, but I want it to just stretch. Using a % works fine in IE. Here is the code: Code:
#left {
width:100%;
height:598px;
padding:0;
background: #EEF;
display: table-cell;
background: url("bg.gif") top left repeat-x;
}
Anyone have any ideas? Firefox 3.6 is showing a blank screen for everything I have set as 100% width but looks ok in Firefox 5. My main concern at this point is this: I'm trying to figure out how to move the 4 navigation items (the owl, contact, portfolio and home) closer to the tree without going over or under it. Any help or suggestions I can get are much appreciated! ------------------------------------- Here's the HTML: Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ATHENA STUDIOS - web design & graphic design in Charlottetown, PEI</title>
<link rel="shortcut icon" href="layout/hoot.ico" />
<link rel="stylesheet" type="text/css" href="athena.css" />
</head>
<body>
<div id="page-wrap"> <!-----page wrap div start------>
<div id="top"> <!-----top div start ------>
<img src="layout/header.png" alt="header image ATHENA STUDIOS WEB DESIGN, GRAPHIC DEIGN & FRONT END DEVELOPMENT" />
</div> <!-----top div end ------>
<div id="navbar"> <!-----nav bar BACKGROUND div start------>
</div> <!-----nav bar BACKGROUND div end------>
<div id="navigation"> <!-----navigation div start------>
<ul id="menu">
<li class="owl"><a href="index.html">Owl</a></li>
<li class="contact"><a href="/contact/">Contact</a></li>
<li class="portfolio"><a href="/portfolio/">Portfolio</a></li>
<li class="home"><a href="index.html">Home</a></li>
</ul>
</div> <!-----navigation div start------>
</div> <!-----page wrap end div------>
</body>
</html>
----------------------------------------- And here's the CSS: Code:
@charset "UTF-8";
/* CSS Document */
body {
width:100%;
font-size: 13px;
font-family: Helvetica, Verdana, Arial, sans-serif;
line-height: 1.4;
background: url(../layout/bg.png);
background-attachment:fixed;
margin:0;
padding:0;
text-align: center;
}
a, a:link {
color: #000000;
text-decoration: none;
}
a:hover {
color: #31636c;
text-decoration: none;
}
a.footer:link {
color: #ddcfb2;
}
a.footer:hover {
color: #ddcfb21;
}
a.footer:visited {
color: #ddcfb2;
}
a.footer:active {
color: #ddcfb2;
}
#page-wrap {
width: 100% ;
margin: auto ;
text-align: center;
}
#top {
width:100%;
background:url(layout/skybg.png);
background-repeat:repeat-x;
text-align: center;
position:relative;
z-index: 500;
}
#navbar {
width:100%;
height:102px;
margin-top:-139px;
padding-top:15px;
background:url(layout/navbg.png);
background-repeat:repeat-x;
}
#navigation {
width:100%;
height:155px;
text-align:center;
margin-top:-154px;
}
/* Everything CSS Sprite Menu */
ul#menu {
text-align:center;
position:relative;
z-index: 501;
padding:0;
list-style:none;
clear:both;}
#menu li{overflow:hidden;
text-indent:-9999px;
display:inline;
text-align:center;
float:left;
margin-right:10px;}
#menu li a{background:url('layout/navigation.png') no-repeat; width:100%; height:100%; display:block;}
/* Owl Button */
#menu li.owl{width:158px; height:146px;}
#menu li.owl a{background-position:0px 0px;}
#menu li.owl a:hover{background-position:0px -2px;}
/* Contact Button */
#menu li.contact{width:150px; height:158px;}
#menu li.contact a{background-position:-158px 0px;}
#menu li.contact a:hover{background-position:-158px -2px;}
/* Portfolio Button */
#menu li.portfolio{width:238px; height:146px;}
#menu li.portfolio a{background-position:-308px 0px;}
#menu li.portfolio a:hover{background-position:-308px -2px;}
/* Home Button */
#menu li.home{width:114px; height:146px;}
#menu li.home a{background-position:-546px 0px;}
#menu li.home a:hover{background-position:-546px -2px;}
NEVER MIND. Got it. lol Hello, Well this is a very simple question ... how can Iset the width of a span from CSS? Basically I tried setting the span with from CSS however the span size remained wrapped to the text inside rather then taking the width I desire. I check some interent forums, and found out that if I set the float:left the width is taken, but my span is no longer is place! is there a way to set the span width without having to set thr float:left option? thanks and regards, Sim085 ok, i know that because span is a inline element width cant be applied to it, and a lot of people suggest DIV my problem is that div wont work, because of its auto-break thing.... it being a block element and all... so, how would i apply a width of something like 100px to the span elements in code like this?... Code: <div class="infocontainer"> <span class="infobox">Publisher: <?php print $publisher; ?></span> <span class="infobox">Developer: <?php print $developer; ?></span> <span class="infobox">System: <?php print $system; ?></span> <span class="infobox">Gen <?php print $genre; ?></span> </div> I want to have some small boxes of fixed width on a page, so I can change the background colour to create the appearance of "flashing lights". I've set the width property on the span tag. It works fine in Internet Explorer but not in Netscape. Any suggestions? Hi, I am trying to create a very simple login form. Before I used to develop everything with tables, so I had the email label and password label alligned under each other correctly. Now I am trying to do it only with divs, spans and css, however i can not give a fixed with the span or labels so that email and password are alligned under each other! Here is the html file I have. Basically I have to login forms, one with css and the other one with tables. You can see that the table example has email and password label alligned under each other keeping the same width, while in the css example email takes less space then password. I tried setting the witdh to the label, but it did not work! Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Login</title>
<style>
div.login{
border: 1px solid red;
}
div.login label{
border: 1px solid green;
width: 200px;
text-align:left;
}
</style>
</head>
<body>
Example with only divs, span and css:
<div class="login">
<div>
<label>
Email
</label>
<input id="username" name="username"
type="text" value="" />
</div>
<div>
<label>
Password
</label>
<input id="username" name="username"
type="password" value="" />
</div>
<div>
<input type="submit" value="Login" />
<input type="button" value="Register" />
<input type="button" value="Forgot Password" />
</div>
</div>
<br>
<br>
<br>
Example with tables.
<table>
<tr>
<td>Email</td>
<td>
<input id="username" name="username"
type="text" value="" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input id="username" name="username"
type="password" value="" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Login" />
<input type="button" value="Register" />
<input type="button" value="Forgot Password" />
</td>
</tr>
</table>
</body>
</html>
What should I do to my css to set a width to a label or span? thanks and regards, sim085 Hello, I am having a problem getting the section that says WHAT OUR CUSTOMERS HAVE TO SAY to span the entire right side of the page. I would like to set it up so that no matter what screen resolution the page is viewed in, that section will stretch all the way to the right side. Any suggestions? http://www.discinsights.com/cyber/Scripts/default.asp Thanks ahead of time! I don't mind telling yall, I'm a bit hesitant to post here, only because I'm very new to html and css, just learning. Folks here are far above my ability, I've got many of the pages on site bookmarked for reference. I'm taking this plunge because I'm ready to rip hairs one by one on a problem. I have a friend who originally made a site in a builder program *shudders* and he has asked me to convert it to more conventional pages (he's determined to keep this theme and I'm not good enough to remake the entire site by hand yet). This program created every thing on the pages as a Div with css styling embedded in the document. Ive got everything working perfectly except that I can not for the life of me get the Div.banner to stretch the width of pages in order for it to span the width of any resolution. What I'm trying to do is simply (or should be) make a 93px by 3 or 4 px bar repeat the length of the div. Here is the code its using at this time. Code: <STYLE TYPE="text/css">
DIV.banner { position:absolute; top:0px; left:0px; z-index:0; }
....</STYLE>
<DIV class="banner"><IMG SRC="images/vbar.PNG" WIDTH=900 HEIGHT=93 BORDER=0></DIV>
The above works but its a fixed width and I would like it to be full width no matter what resolution ones using. I have tried making the Div class="banner" use a width=100%. This causes the image to be shown at top=0 and left=0 once only. I tried adding background-repeat repeat-x to the css code. Any other changes I make like removing the Width from the Div class all together causes it to just go away. I've been able to manipulate everything else from this horrible theme fine except this. I'm sure there is something simple I'm missing and if you need to see more of the index page code just let me know (its not online at this time). I didn't want to put in too much stuff and being such a n00b at all this, I'm learning so be gentle with me.. Thanks in Advance Me 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;
}
I'm basically asking the same question as this post, but hoping that I can press for a better solution. I have an element which contains an image and some text, and I need that element to expand to the width of the image, not the text. The size of the image will change, so I can't set a fixed width on the containing element. The code I have which doesn't work looks like this: Code: <html> <head> </head> <body> <span style="display: inline-block; border: 1px solid black"> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio.</div> </span> </body> </html> The solution proposed in the post I linked to looks like this: Code: <html> <head> </head> <body> <table width="1"> <tr> <td> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio. </td> </tr> </table> </body> </html> The second example gives me the functionality I'm looking for, but I would really like to avoid using tables. I'm hoping there is a CSS solution to this. 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. 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 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 Hey, I need to get a div to expand to the full width of a page in firefox. IE seems to do this automatically. Say I have this layout; Code: <div style="float:left; width:30px;">first column</div> <div style="float:left; width:100%;">second column</div> In firefox, this puts the second div on a new row and expands it to the full width of the page; | 30px | | 100% | I want it to stay on the same row as the first div, and use the available space; |30px| |left over width (100%)| I can get this working in IE but i'm struggling with firefox... Thanks for your time, -Ross Hi there! My website (Yes.. I'm aware I use tables. Sue me. :P) has been driving me crazy CSS-wise. width:100% doesn't seem work right! Well, I know it does... but it hasn't been, and I have no idea why. As you can see in that page (and the forums too....) the black-bordered table underneath each subheader stretches too far in everything but Firefox. In Opera, not only does the black-bordered table stretch too far, but the subheading stretch... too little. O_o I am at a complete loss for words at this. Also, might I point out that when you visit a song on the site, the file type navigation (#sheetNav in the CSS file) works just fine? Any help would be GREATLY appreciated. For your convenience, here is the CSS file. Yes, it's something of a mess... forgive me. http://apollomix.com/master.css Thanks a lot! |
|||||||