|
CSS - Firefox/ie Issue: Width Not Right, And Background Not White
So I'm having what I think are CSS issues with a site...
I'm supposedly a "new user" though I've been registered for a long time, and just not used this account in a long time, so I can't show my URL's here... tried to abbreviate them... I'm not sure how to show you what the issues are if I'm not allowed to post URLs. Anyone with any suggestions there? This looks fine in IE, but not in Firefox. On (blocked) the main content that sits in the middle of the page sits in an 800px div called "page". I've set the background color for that to be white: FFFFFF, which Internet Explorer seems to understand. But Firefox seems to be leaving "page" to be transparent. This means that either the left div (content) or the right div (reef-job) ends when the content inside of it ends, rather than continuing down to the bottom of the "page" content. I'm not sure how to fix it for Firefox. Again, it's all the pages inside of (carrieandjonathan [dot] com /island-reef-job) and the stylesheet is at (carrieandjonathan [dot] com / island-reef-job / mt-island-reef-job.css) #page { width: 800px; margin: 0 auto; padding: 0px 0; background-color:#ffffff; } Any help is greatly appreciated. Thank-you in advance! Warmest, Jonathan Similar TutorialsCSS 1, Netscape 4.x and background+width issue need workaround: I am working on a website template and converting it to CSS. I have seperated my CSS1 from my CSS 2 sheet and am currently trying to get NN 4.x to do what I have read it won't do and have no idea how to make it do what I want. BTW:Please do not advise me to drop NN 4.x, unfortunately it is not within my power to do so. What I need to do is put a background color on an H1 header that will be only as wide as the table cell (column) it is in. (3 column plus header and footer layout). BTW: I cannot drop the table either. My problem is that when I get the background to work (instead of just surrounding the text) I cannot get it to be liquid and remain inside its cell. When I set the width to %'s it just pushes the other 2 columns out of the way even when the % is not the width of the column. Unfortunately, pixels are not flexible enough for this layout. So, how do I get a background color on an H1 tag that fully expands to the width of the column (not just the text) using CSS 1 and NN 4.x while not destroying the table layout? Thank you for your help- Schach PS: This is not an issue of my code, but an issue of the NN 4.x CSS support. So I do not need to have the code debugged, but instead I need a hack or method to outsmart the browser, so I can duplicate a site in CSS. This site is currently heavily reliant on tables, something we want to change, but can't unless we can reproduce the site in NN 4.x. (You can email me if you would like to do that) Hello everyone I've created a faux background for a website I'm currently working on to create the illusion of a column extending to the bottom of the page. The url is as follows: http://notquiteperfekt.gamedaemons.net/eruptmediav2/erupt.html The CSS code I've used is: body { background-image: url("images/pgbkg.jpg"); background-repeat: repeat-y; background-position: 50% 0%; } ---- When viewing the page in Internet Explorer 5.0+ it lines up fine. However, in order for it to line up successfully, I had to add the following code to nudge my <body> content over: html body {padding-left:11px;} ---- Fine and dandy, the extra code made things line up quite nicely. Then comes FireFox. The <body> content is 1px to the right of the background & causes the page to be a little off-center. View the previous URL in FireFox to better understand what I mean. ---- When I don't use the html body {padding-left:11px;} then the page is approximately 11-12 pixels off center - however my CSS code tells the background to position itself 50% on the X-axis & my HTML code tells the body to center itself as well via align="center" Why do these two not line up then? ---- If anyone can view->source to pick out what's causing this & reply back it would be greatly appreciated. You can reply here or e-mail me at sevunx@gmail.com.NOSPAM - I thought I was past all of the headaches with CSS Misalignment - white space in IE 8 Hi Not able to find the cause of the spaces in IE8. works perfect in FF http://tinyurl.com/26resg9 The same code on different website works fine in both IE8 and FF http://tinyurl.com/y9hvmmw I know the problem is somewhere here in main.css file Code:
.content-wrap{
background:url(watermark.jpg) no-repeat;
width:1000px;
margin:0 10px;
padding:0;
}
Can someone help? Hello, I have a container div with an id of "outer". This container holds 3 column divs, leftcolumn, rightcolumn and centercolumn. The container CSS looks like this: Code: #outer{
padding:0px;
margin-left:auto;
margin-right:auto;
width:755px;
background-color:#FFFFFF;
height:100%;
z-index:1;
background-image: url(images/common/whitebox.gif);
background-repeat:repeat-y;
}
But for some reason, the container doesn't extend down to the length of the inner divs. Each column will vary in the future because everything is pulled from a database. Yet you can see the issue he http://www.caillouette.com/FriendsPHP2/index.php Any help, tips or tricks are appreciated. Thanks First of all here is the page: http://xander6669.com/ It looks like I want in IE, but there is a still a white space on top of the page with firefox/opera. I've tried hundreds of things but I can't seem to be able to fix it. Anyone could give me a hand? Here is the HTML and CSS: HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/><title>Xander6669</title> <link rel="stylesheet" href="body/body.css"/></head><body> <img src="images/border1.gif" alt="" height="5" width=779"/></body></html> CSS: Code: body {
margin: 0px;
padding: 0px;
}
Hello. I've spent the past week making my web page. It is currently hosted on my laptop. When I finalize it, I will upload it to a proper hosting service. I have a job interview for a co-op job for searstravel.ca tomorrow, and I want to make sure my website works across all browsers. My webpage is at URL. If you open the page in IE, you will notice a horizontal white space just beneath the image at the top. In Mozilla (suite/Firefox) and Opera the site displays just fine. I've had the site looked at by a number of friends who are more adept at CSS than me, but to no avail. I was hoping that someone in here might spot the cause of the display bug. The CSS file is located at URL. Thanks for your help everyone! I have the following code which works fine in IE but not in firefox. <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF"> <tr><td></td></tr> </table> IE displays just white space as intended, but firefox displays a black border line. I need a white border of 1 pixel around the table. The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. Using my http://www.thatspotonline.com as an example I'll explain my problem. I'm trying to use a 3 column fluid layout with a header and a footer. I've gotten past the browser problem with IE and now face a new problem with proper display in firefox. With the included css and attached xhtml layout I end up with a rather large gap on the bottom of the design without adding quite a bit of content to make the page length grow. I've tested with about everything else and this problem doesn't show up. I would gladly take some advise if anyone has any thanks. Code: * {
margin:0 auto;
padding:0;
}
h2 {
font:bold 2em/1.4 "Lucida Bright", Georgia, Times, serif;
color:#8B9F86;
}
h3 {
font:bold 1em/1.6 "Lucida Bright", Georgia, Times, serif;
color:#845697;
}
a {
color:#4C53E0;
}
a:focus, a:hover, a:active {
color:#EB8518;
}
body {
background:#000000 url(images/body2.jpg);
background-repeat:repeat;
background-position:top left;
font-size:90%;
margin:0 auto;
padding: 24px 0;
}
#outer {
margin:0 auto;
width:80%;
min-width:40em;
max-width:70em;
border:10px solid #EEEEEE;
border-width:0 5px;
background:#EEEEEE;
}
ul#nav:after, #outer:after, #sub:after, form:after, form div:after {
content:".";
display:block;
visibility:hidden;
clear:both;
height:0;
}
* html #nav, * html #content, * html form, * html form div {
height:1%;
}
ul#access, .off {
position:absolute;
left:-1000em;
top:-1000em;
}
hr {display:none}
#header {
background:#EBEBE9 url(images/banner-bg2.jpg) repeat-x left bottom;
}
#header h1 {
padding-left:.6em;
font:bold 3em/2.5 "Lucida Bright", Georgia, Times, serif; /* line-height allows for image of buildings */
letter-spacing:1pt;
color:#FFFFFF;
background: transparent url(images/banner2.jpg) no-repeat right bottom;
}
#header h1 a {
color:#FFFFFF;
text-decoration:none;
}
ul#nav {
list-style:none;
margin:3px 0 1em;
text-align:center;
background:#FFFFFF;
border-top:2px solid #444444;
border-bottom:2px solid #444444;
}
#nav li {
list-style:none;
margin:0 auto;
width:94%;
min-width:40em;
max-width:70em;
display:block;
text-align:center;
background:#000000;
}
* html #nav li {
width:24.9%;
}
#nav a {
display:block;
font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
text-decoration:none;
color:#444444;
margin:1px;
background:#FFFFFF;
}
#nav a:focus, #nav a:hover, #nav a:active {
border:1px inset #8B9F86;
margin:0;
color:#EB8518;
text-decoration:underline;
}
ul#nav li#active {
background:#FFFFFF;
font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
color:#000000;
text-decoration:underline;
}
#sub, #right {
font: 1em/1.5 'Lucida Grande', arial, verdana, sans-serif;
word-spacing:.1em;
margin-bottom:1em;
}
#sub {
width:74%;
float:left;
position:relative;
}
#center {
width:65%;
float:right;
}
#left {
width:33%;
float:left;
}
#right {
width:25%;
float:right;
}
#center p {
margin:.5em 2% .5em 0;
}
img.img-right {
float:right;
}
#left h2 {
color:#845697;
font-size:1.5em;
}
#left p {
font-size:.9em;
}
#right {
font-size:.9em;
}
#right h2 {
font-size:1.2em;
}
/** Footer **/
#footer {
clear:both;
margin-top:1em;
font: 0.9em/1 'Lucida Grande', arial, tahoma, verdana, sans-serif;
border-top:3px double #C8DCC2;
}
#footer p {
margin:1em 1em 1em 0;
text-align:center;
padding: 21px 0;
}
#footer ul {
list-style:none;
margin-top:.7em;
}
#footer li {
display:inline;
border-right: 1px solid #C8DCC2;
padding:.3em 2%;
}
Quick question, can someone tell me why do i get a white space on the right side of the screen http://www.impulsanl.org/testing.htm on IE 7 and IE 8? It seems to work ok with firefox and google chrome. (all screen). CSS code: Code: #extraDiv1 {
background: url(images/header1.png) repeat-x;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
HTML Quote: <div id="extraDiv1"></div> thanks. Hey everyone, I am just touching up an old design I made, and I just noticed that Firefox has a weird white-space next to the top menu. Not sure what is causing it, but it is there. Here is a screenshot of what is happening in Firefox. Also, in IE, the container doesn't extend past the bottom menu. Here is a screenshot of what is happening in IE. So far I am just testing in Firefox 2.0.0.11 and IE7. Here is my code: html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title></title> <style type="text/css">/* <![CDATA[ */ * { padding: 0; margin: 0; } body { background-color: #6AB2DA; color: #000000; text-align: center; font-size: 13px; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; /* Thank you, Kravvitz */ } a { color: #6AB2DA; } a:focus { outline: 0 none; } #container { margin: 0 auto; text-align: justify; width: 50%; } #page { background-color: #FFFFFF; } #header { background-image: url( http://img443.imageshack.us/img443/8114/bg1bp4.jpg ); background-position: bottom left; height: 120px; width: 100%; } #header span { padding-left: 150px; padding-top: 50px; font-size: 21px; font-weight: bold; letter-spacing: -0.1em; color: #666666; display: block; } #menu { background-color: #6DC3DE; width: 100%; } #menu li { float: left; padding-top: 10px; padding-bottom: 11px; list-style-type: none; } #menu a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; } #news { clear: both; margin-top: 34px; overflow: auto; padding: 15px; height: 100px; border-bottom: 1px solid #0AA; } #news h1 { color: #6DC3DE; font-size: 21px; } #content { margin-top: 15px; padding: 15px; } #content h2 { padding-top: 10px; float: left; color: #6DC3DE; padding-right: 25px; font-size: 31px; border-right: 3px solid #6DC3DE; } #content .info { padding-top: 10px; padding-left: 25px; float: left; font-size: 11px; height: 31px; } #content p { text-indent: 45px; clear: both; border-bottom: 1px dotted #6DC3DE; padding-top: 10px; padding-bottom: 10px; } #bottom { border-top: 1px solid #6DC3DE; margin-top: 10px; padding: 5px; } #bottom ul#one { float: left; } #bottom ul#two { float: right; } #bottom li { padding-top: 10px; padding-bottom: 11px; list-style-type: none; display: block; } #bottom a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; display: block; width: 250px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* ]]> */ </style> </head> <body> <div id="container"> <div id="page"> <div id="header"><span>i.love.summer</span></div> <div id="menu"> <ul> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> </ul> </div> <div id="news"> <h1>welcome</h1> Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. </div> <div id="content"> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> </div> <div id="bottom"> <ul id="one"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> <ul id="two"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Any suggestions would be great. 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 On the main page of my site, I have a "slogan box" with a width set to 40%. This is outlined and has a background color. In IE, it outlines and colors in the blank space up to 40%, the desired effect. But in Firefox and Mozilla, it outlines only up to where the text stops. Here's the main css behind it: #slogan { border-bottom:2px solid black; border-right:2px solid black; border-left:2px solid black; background-color:#ABAABB; font-family:comic sans ms; width:40%; } Attactched is the screenshot from IE and firefox. How can I make it look like it does in IE for all browsers (i.e., what is the correct code?) The full code can be seen here. WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! my site looks different in IE9. The red block on the right of Find Us shifts down onto the next line but in IE8 firefox and opera it displays fine. Is there a way to sort this without conditional statements or do i need to redo the menu set up agian? Here is a snippet of the css for the menu: Code:
#topMenu { width:960px; position:absolute; bottom:0;}
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
font-size:16px;
}
ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}
.left { width:206px; background-color:#d30507; height:19px; }
.right { width:55px; background-color:#d30507; height:19px; }
ul#menu li a
{
display:block;
float:left;
color:#fff;
text-decoration:none;
padding:0px 20px 0 20px;
border-right: 1px solid #d30507;
}
ul#menu li a:hover
{
color:#fff;
background: #d30507;
}
ul#menu li a.current
{
display:inline;
color:#fff;
background: #d30507;
float:left;
margin:0;
}
If you could please see this page: http://pnlab.soundwebdev.com/PostCalendar.phtml compare in IE vs. Firefox (or anything good ) You will see that in IE the content of the right column shifted below the last thing in the left column. I believe this is because IE thinks that the right-col content is too wide and so shifts it down. Obviously, I don't want that. because this is a dynamic-content site (Postnuke), I can't just change the width of the content on the right-col, so the solution has to be in the template or the css. template: http://pnlab.soundwebdev.com/themes...ates/master.htm (view source) css: http://pnlab.soundwebdev.com/pnTemp...imple.style.css any ideas? puulllease? Hi all, I'm having a little trouble getting my CSS rounded border to display correctly. I've neally got it however i am unable to sort out the right hand side alignment. I want it to be 234px wide, at the moment i have the width set at 100% but whenever i change this value to anything smaller or a fixed width i get all kind of incorrect output. You can see the code he Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <STYLE type="text/css" media="all"> @import url( css/commonDesignA.css ); </STYLE> </head> <body> <BR><BR> <!-- START: Boxed Cell Information Cell --> <div class="wpFieldSetCornerTopLeft"></div> <div class="wpFieldSetTopCenter"></div> <div class="wpFieldSetCornerTopRight"></div> <div class="wpFieldSetCenter"> <div class="wpFieldSetCenterContent"> <!-- START: Boxed Cell Information Cell Content --> <Span class="mytpPanelHaeding">Test</span> <!-- END: Boxed Cell Information Cell Content --> </div> </div> <div class="wpFieldSetCornerBottomLeft"></div> <div class="wpFieldSetBottomCenter"></div> <div class="wpFieldSetCornerBottomRight"></div> <!-- END: Boxed Cell Information Cell --> </body> </html> ...and the CSS file: Code:
.panelHeading
{
COLOR: #982E33;
}
/* *** Field Set Corner/Center Styles ** */
.wpFieldSetCornerTopLeft
{
font-size: 0px;
float: left;
vertical-align: top;
width: 4px;
height: 4px;
background-image: url(../images/borders/top_left.gif);
background-repeat: no-repeat;
}
.wpFieldSetCornerTopRight
{
font-size: 0px;
float: right;
vertical-align: top;
width: 4px;
height: 4px;
background-image: url(../images/borders/top_right.gif);
background-repeat: no-repeat;
}
.wpFieldSetCornerBottomLeft
{
font-size: 0px;
float: left;
vertical-align: top;
width: 4px;
height: 4px;
background-image: url(../images/borders/bottom_left.gif);
background-repeat: no-repeat;
}
.wpFieldSetCornerBottomRight
{
font-size: 0px;
float: right;
vertical-align: top;
width: 4px;
height: 4px;
background-image: url(../images/borders/bottom_right.gif);
background-repeat: no-repeat;
}
.wpFieldSetTopCenter
{
font-size: 0px;
float: left;
vertical-align: bottom;
height: 4px;
width:234;
background-color: #ffffff;
border-top: 1px solid darkblue;
}
.wpFieldSetBottomCenter
{
font-size: 0px;
float: left;
vertical-align: top;
height: 4px;
width:234;
background-color: #ffffff;
border-bottom: 1px solid darkblue;
}
.wpFieldSetCenter
{
float: left;
width: 100%;
background-color: #ffffff;
}
.wpFieldSetCenterContent
{
padding-right: 10px;
padding-left: 10px;
padding-bottom: 0px;
padding-top: 0px;
border-right: 1px solid darkblue;
border-left: 1px solid darkblue;
}
BODY
{
BACKGROUND-IMAGE: url(../images/bg_gradient_blue-D7E8F0.jpg);
BACKGROUND-COLOR: #d7e8f0;
BACKGROUND-repeat: repeat-x;
background-attachment: fixed;
MARGIN: 0px;
}
Any help greatly appreciated. Cheers. 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? 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. |
|||||||