|
CSS - Border Shows Up In Firefox For White
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. Similar TutorialsOn my website (www.tonecollector.com) I use CSS to get a dashed style to my header. The header also has a background image. Without the background image it works ok, but with the background image it doesn't. The CSS: .headertabel { background-image: url(/img/headerbg.gif); background-color: #FF7B08; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #FFF6DB; text-decoration: none; border-left: 6px dashed #FF7B08; border-right: 6px dashed #FF7B08; } The Problem: http://www.tonecollector.com/dev/what.gif Whats the solution? All, I have a header on this page backup.whiteslimo.com with 3 images inserted into it listing the company name, service, and contact info. My problem is that when they are displayed there is a thin white border on the bottom and right hand sides of each image. But the image doesn't have these borders. If you are in Firefox/Mozilla and you right click on the individual images and select View Image, you will see that the image itself does not have these borders. I am thinking that somewhere along some attribute is being added that is causing this but since I am a CSS neophyte (This is still my first week lol) I am not sure. Any help is much appreciated. Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
a site im working on .. (apparently I cant post URLs....) it's the normal stuff at teh beginning with porservices.formapixel and the normal web ending stuff at the end. works fine in Firefox. I validated with transitional. In IE7 the background images for the main divs show up but the entire content and header do not. I thought for some reason it had to do with the z-index. So I removed it from the CSS and changed the .gifs to .pngs that are transparent in the center. It still doesnt work. I'm lost. Quote: #bg { position: absolute; top: 0px; left: 0px; background: #fff url('images/bg.png') no-repeat; width: 747px; height: 264px; } #wrapper { position: relative; width: 747px; margin: 0 auto; background: #fff url('images/abg.png') repeat-y; } that is the css relating to the two images that seem to be blocking everything (that's the only thing I can figure is that those two bg images are just sitting on top of everything.) any suggestions? I can provide the entire css file if necessary just didnt want to post all of that here if i didnt need to. thanks in advance. Hi, why Firefox shows it wrong and IE right? The website is www.theoutsourcingcompany.com If I change the value of margin-top to zero for the divs div-logo and div-text it looks good on both browsers but there's too much white space on top of the logo and the text... I am very frustrated, please help me. Here's the code for 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>The Outsourcing Company - Web design, copywriting, programming. | Outsourcing Services</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
text-align: center;
margin: 0;
background-color: #9e0b0f;
background-image: url(images/back.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="div-header"></div>
<div class="div-middle">
<div class="div-logo">
<p><img src="images/logo.jpg" alt="The Outsourcing Company" width="193" height="55" /></p>
<p><span class="div-menu"><img src="images/home.jpg" alt="Home" width="96" height="26" /><br />
<img src="images/about-us.jpg" alt="About Us" width="96" height="26" /><br />
<img src="images/ourservices.jpg" alt="Our Services" width="96" height="26" /><br />
<img src="images/contactus.jpg" alt="Contact Us" width="96" height="26" /></span></p>
</div>
<div class="div-text">
<p>The Outsourcing Company is your business partner for:</p>
<p><img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Software Development<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Content Generation / Article Writing<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Internet Marketing<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Search Engine Optimization (SEO)<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Pay-Per-Click (PPC) Campaigns Management<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Professional Copywriting Services</p>
<p>We have two goals:</p>
<p><img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Help you make more money by increasing your revenues<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Help you save money by optimizing your costs and processes</p>
</div>
</div>
<div class="div-footer"></div>
</body>
</html>
And this is the CSS: Code:
.div-header {
background-image: url(images/header-blank.jpg);
background-repeat: no-repeat;
margin: auto;
height: 164px;
width: 800px;
}
.div-footer {
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
margin: auto;
height: 48px;
width: 800px;
}
.div-logo {
height: 55px;
width: 193px;
margin-left: 40px;
text-align: right;
float: left;
margin-top: -120px;
}
.div-text {
float: left;
text-align: left;
width: 485px;
padding-left: 30px;
font-family: "Myriad Pro";
font-size: 13px;
margin-top: -108px;
}
.div-middle {
background-image: url(images/middle.jpg);
background-repeat: repeat-y;
margin: auto;
width: 800px;
height: 1000px;
}
On my website, my menu shows dots on FireFox, but none in Chrome and ie, I would want to remove the dots , is there any way i can do that? www.willietsang.co.cc Thanks in advance.! Hello, I was wondering if anyone could help me get this background image to show up in firefox. It shows up in IE. It's the first #header image. I included the other code in case something is conflicting. *edit... nvm. The website Quote: downloadwarez.org CSS Quote: /* default styles */ body { padding: 5px 0 0 0; margin: 0; font: .7em Tahoma, Arial, sans-serif; line-height: 1.7em; background: #fff url(images/bg.gif) repeat-x; color: #454545; } a { color: #2F637A; background: inherit; } a:hover { color: #808080; background: inherit; } p { margin: 0 0 5px 0; } h1 { font: bold 2.2em Arial, Sans-Serif; padding: 8px 0 0 0; margin: 0; letter-spacing: -1px; } h2 { margin: 0; padding: 0; font: bold 1.8em Arial, Sans-Serif; letter-spacing: -1px; } h1 a, h2 a { color: #000; background: inherit; text-decoration: none; } ul { margin: 0; padding : 0; list-style : none; } img { border: 0; } /* layout */ #content { margin: 10px auto; width: 960px; } #logo { margin: 0 0 10px 0; } #slogan { font-size: 0.9em; margin: 0 0 10px 2px; padding: 0; color: #808080; background: #fff; } #top_info { line-height: 27px; float: right; color: #808080; background: #fff; margin: 12px 5px 7px 0; text-align: right; height: 74px; } /* round blue login button */ #loginbutton a { text-decoration: none; width: 24px; padding: 7px 12px; margin: 0 0 0 8px; height: 28px; background: #fff url(images/lb.gif) no-repeat; color: #000; } #loginbutton a:hover{ background: #fff url(images/lbhover.gif) no-repeat; color: #000;} /* main horizontal menu */ #tablist{ padding: 3px 0; margin: 0; float: left; } #tablist li{ list-style: none; display: inline; margin: 0; } #tablist li a{ text-decoration: none; padding: 4px 22px; margin-right: 2px; background: #808080 url(images/corner.gif) no-repeat top right; font-weight: bold; color: #fff; } #tablist li a:hover{ background: #6495AB url(images/corner.gif) no-repeat top right; color: #fff; } #tablist li a.current{ background: #9FC7D8 url(images/corner.gif) no-repeat top right; color: #2F637A; padding: 6px 22px; } #tablist .key { text-decoration: none; } /* main menu topics */ #topics { clear: left; float: left; width: 640px; background: #B0D0DC url(images/topicsbg.gif) repeat-x left bottom; padding: 8px 5px; margin: 0 0 5px 0; color: #fff; height: 59px; } #topics li a { background-image: url(images/bullet.gif); background-repeat: no-repeat; background-position: center left; padding: 0 0 0 12px; } /* main menu search */ #search { float: right; text-align: right; background: #fff url(images/searchbg.gif) no-repeat; color: #000; padding: 32px 20px 12px 20px; min-height: 32px; /* FF height */ height: 25px; /* IE height */ width: 270px; } /* search form styling */ form, form p { margin: 0; padding: 0; line-height: 25px; } .search { width: 170px; border: 1px solid #357994; background: #fff; color: #478F36; padding: 4px; margin: 0; font-weight: bold; font-size: 1.3em; } .button { padding: 4px; font: bold 1em Arial, Sans-Serif; } /* left side */ #left { float: left; width: 635px; margin: 0 0 10px 0; } .subheader { margin: 0 0 10px 0; padding: 8px; background: #f4f4f4 url(images/bgshade.gif) repeat-x; color: #808080; border-bottom: 1px solid #ccc; } .left_articles { margin: 0px 0 10px 0; background: #fff url(images/bgshade.gif) repeat-x; color: #454545; padding: 15px 15px 5px 10px; } .date { font-size: .9em; padding: 0 0 0 12px; background: #fff url(images/news.gif) no-repeat center left; color: #808080; } .bigimage { float: left; clear: left; border: 1px solid #ccc; background: #eee; color: #000; width: 200px; height: 150px; margin: 0 15px 10px 0; } .left_box { background: #f4f4f4; color: #808080; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: 15px; margin: 0 0 15px 0; } .thirds { float: left; width: 186px; padding: 0 10px 0 15px; } /* right side */ #right { float: right; width: 310px; margin: 0 0 10px 0; } .right_articles { border: 1px solid #ccc; padding: 8px; margin: 0 0 10px 0; background: #eee; color: #454545; } .image { float: left; margin: 0 9px 3px 0; } .notes { border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: 17px 10px 17px 80px; margin: 0 0 10px 0; background: #fff url(images/notes.gif) no-repeat center left; color: #454545; } /* footer */ #footer { clear: both; color: #808080; background: #FFF; padding: 10px 15px; border-top: 1px solid #ccc; } #footer .right { float: right; } The page bar should be below the software table, like it is displayed in FireFox. But it shows wrong in Internet Explorer and Opera. The code looks ok, so i think it must be CSS. Can anyone help 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! 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;
}
http://www.pricedigital.com/ejs/advanced/0009/weight-loss-am-i-a-candidate-for-weight-loss-surgery.htm Check it out in IE and then firefox. It shows up great in IE but in firefox its not hidden. 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 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. I just can't seem to see why Firefox only shows part of the border on the < ul> element. IE 6 seems OK. Here's the link: imagesandwords.org.uk/andrewjamesrp/index.php Here's the HTML: < div id="navcontainer"> < ul id="navlist"> < li>< a href="#1" title="Examples of the Work">Images< /a>< /li> < li>< a href="pages/about.php" title="About the artist">Andrew< /font>< /a>< /li> i etc for the other links < /ul> < /div> Here's the CSS: #navcontainer { color: #8d1016; font-weight: bold; width: 205px; padding: 20px 0 0 115px; } #navcontainer ul{ list-style: none; width: 90px; padding: 0; color: inherit; border: 1px black solid; } #navlist li { width: 90px; } #navlist li a { display: block; width: 100%; padding: 2px 14px; background-color: #E8E8E8; border: 2px solid #E8E8E8; background-image:url(siteimages/nav_arrow.gif); background-position:left center; background-repeat:no-repeat; text-decoration: none; } #navlist li a:hover{ color: black; background-color: #C0C0C0; border-style: outset; padding: 2px 14px; background-image:url(siteimages/nav_arrow02.gif); background-position:left center; background-repeat:no-repeat; } html>body #navlist li a:active { border-style: inset; } Why do the margin-top values on these layers DO NOTHING in firefox, but act as expected in IE? Which way is actually correct? Also, if I add a float:left to the blue layer, firefox adds a margin-top to the blue and green layers only? This seems very wrong.. How can I get the expected margin-top on each layer? Code: <BODY style="background-color:yellow;"> <div id='blue' style="width:250px; height:250px; display:block; margin-left:1px; margin-top:10px; background-color:blue; position:relative;"> <div id='green' style='width:220px; height:200px; margin-top:10px; background-color:green; display:block; position:relative;'> <!--- prod selector box ---> <div id='gray' style='width:200px; height:150px; overflow:auto; margin-top:10px; margin-left:4px; display:block; background-color:gray; position:relative;'> asdf </div> </div> </div> </BODY> I've got a layer on my page that I'm showing and hiding through javascript. The layer is positioned absolutely and given a position of right: 0 and bottom: 10px in the CSS file. Now in one case I actually went into the page and did an inline style to change the position. So that one is given a different position, top: -5px and left: 10px. In IE it works fine. In Firefox the border sometimes won't expand to enclose the box. Here's what I've found: -Take out the position from the CSS file and position with inline style -- works. -Leave the position in the CSS file and don't position with inline style -- works. -Leave position in CSS file and change right to left and change to any value -- works. -Leave position in CSS file and change bottom to top and change to any value -- doesn't work. So the big culprit here seems to be defining a position with bottom and then switching to top causes Firefox 1.5 or 2 to fail. The same thing seems to happen in Opera 9. This seems like a bug, but why in multiple browsers? I've tried floating things within the box, setting the overflow to auto, nothing seems to make the border expand around the box. Any thoughts? It looks fine in IE. But went wrong in Firefox. Also there seems to be a space to the right of each img button. :cry: IE http ://imgboost.com/uploads/894333_screenshot2.jpg FF http ://imgboost.com/uploads/113426_screenshot1.jpg My Css Quote: * { margin: 0; padding: 0; } html{ height: 100%; margin: 0; padding: 0; } body { height: 100%; font-family:Arial, Helvetica, sans-serif; font-size:12px; margin: 0; padding: 0; } * html #container { height: 100%; } #container { position: relative; min-height: 100%; } #buttons { padding-right: 0em; padding-left: 0em; } #topLinks { list-style: none; margin-top: 0; margin-left: 0; margin-right: 0; padding-top: 0.9em; padding-right: 0; background-image: url(../images/footer_bg.gif); background-repeat: no-repeat; } #topLinks li { display: inline; border-left: 1px solid #FFFFFF; padding-right: 0em; padding-left: 0em; } #topLinks li.topLinks_first { border-left: 1px solid #FFFFFF; } #topLinks li.topLinks_last { border-right: 1px solid #FFFFFF; } #topLinks a { color: #FFFFFF; } #header { padding-top: 5px; padding-left: 5px; margin: 5px; } #footer { width: 100%; text-align:center; position: absolute; bottom: 0; margin:0; padding:0; } #footer_pink { background: url('../images/footer_pink.gif') repeat-x; height: 35px; } #bottomLinks { font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; list-style: none; margin-top: 0; margin-left: 0; padding-top: 0.9em; background-image: url(../images/footer_bg.gif); background-repeat: no-repeat; } #bottomLinks li { display: inline; border-left: 1px solid #FFFFFF; padding-right: 1em; padding-left: 1em; } #bottomLinks li.first { border-left: 0 none transparent; } #bottomLinks a { color: #FFFFFF; } #footer_yellow { background: url('../images/footer_yellow.gif') repeat-x; height: 55px; } .footer_yellow { font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#333333; } #footer_content { padding-top:1.0em; } #footer_yellow img { border: none; } #menu { background: url('../images/pink_menu.gif') repeat-x; height: 37px; text-align:center; } #menu a img { border: none; } #menu ul { padding:0px; margin:0px auto; } #menu ul li{ display:inline; list-style-type:none; } Hey all, I am working on completely redoing our website (FizzPow.com) I have a border-right: on my left column in a wordpress template I am modifying. It looks fine in Chrome, IE9, Safari5, but in FF7, it moves my right column all the way down. Here's the site: FizzPow.com/newsite I am an experienced programmer but fairly novice with HTML/CSS. Please be kind and I very much appreciate your help! |
|||||||