|
CSS - Firefox Css Border-top Issues
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> Similar TutorialsHi. 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>
nevermind. i figured it out. I've searched the archives to no avail. I am layering some svg images with div tags, and have set borders around the images. They are maps, one is an overview of the larger one set in the upper right corner of the larger one. My overview svg image displays correctly over the top of the larger one, but the border is behind the larger one. I've tried z-index, position: absolute; top: and what not. Any insight would be most appreciated. Sean Thanks for your time. Still learning design, so thanks for your help if they are easy solutions. Border Issue: In IE and FF I have a complete border on a few header div's. The bottom and top border is different color than the left and right borders. You can see that the dark brown bottom and top borders appear to lay overtop of the white left and right borders. Website is he http://onlinecasinoboss.true2formde...e.php?page=home Styling CSS is he http://onlinecasinoboss.true2formde...aster-style.css Layout CSS is he http://onlinecasinoboss.true2formde...ster-layout.css IE Layout Issue: In FF the three center content columns display how I want it to look. When you view the same home.html page in IE you can see that they don't space out how I'd like. It is most visible by compairing the boxes on the right of the center content. Thanks a ton for your time and help, I appreciate it. 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; } 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; } Trying to use css to make a border around an element, and am using: .navbar { border: 1px solid red; } In IE, it puts a border around the navigational bar, but in FF, it only puts 1 line above it. Even if I try independently adding: border-left border-right border-bottom etc, it only shows above for border-top and border-bottom and nothing for left and right. I can place the code if needed, but I really just have a few words typed to try and get this to work. It's of strict doctype if that matters. Does FF have something special I need to add to get border to work? Thanks. 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! 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. hi everyone, i have been trying to align border left/right correctly in ff but it always crates gap on top and bottom (see screenshot) while on ie it works as supposed to (screenshot below) here is my code Code: #center_container{margin-left:118px;margin-top:24px;}
#center_container_text{
width: 522px;
border-left:1px solid #757d7b;
border-right:1px solid #757d7b;
}
#banners{float:right;margin-top:20px;margin-bottom: 10px;width:100px;border: 1px solid black;}
Code: <div id="center_container">
<div id="banners">
<p>a</p>
<p> </p>
<p> </p>
<p> </p>
<p>asd</p>
<p>asd</p>
<p>as</p>
<p>d</p>
</div>
<div><img src="images/box_header.gif" name="Categories_header" alt="" /></div>
<div id="center_container_text">
<p>a</p>
<p> </p>
<p>asd</p>
<p>asd</p>
<p>as</p>
<p>d</p>
<p>asd</p>
</div>
<div><img src="images/box_bottom.gif" name="Categories_bottom" alt="" /></div>
</div>
thx. As you can see, the image that says view all clients has a blue border on top and to the left also. There are no borders set for this image so I am not sure why its there. It does not show up on safari, just firefox. (I am not sure about IE since I am on a mac). Here is the code: .view_all_projects{ width:245px; height:63px; position:absolute; overflow:hidden; margin: 550px 0 0px 0; } And here is the html: <div class="view_all_projects"><a href="http://www.bestdropshipper.net/order.html"><img src="images/more_project.gif" alt="Best Dropshipper"/></a> </div> This image is also clickable. Any ideas why the strange blue border? In IE-only.com Firefox is extending the bottom border of my blogTitle divs the lenth of the page. The other browsers are fine with the code. Tested on FC4, and IE was tested on XP Home. All are the latest versions (Fx:1.5, Konqi:3.x, Opera: 8.5, IE: 6.x). Why would Firefox do this? How can I correct this? Thank you. Can any of you tell me why with the a:link/visited set with border:none (as in the example at the bottom of the e-mail), I get a box around an image inside a link: <a href="communication.php"><img src="resources/president.jpg"></a> Working on a MAC, I noticed that the border only appears in Firefox but not in Safari, Opera and OmniWeb. Can anyone tell me why this border appears around the image, why only in FF, and of course, how one can make it dissappear using the stylesheet? STYLESHEET: a {text-decoration: none;} a:link { color: #000000; border: none;} a:visited { color: #000000; border: none;} a:hover { color: #bbbb00; border: none;} a:active { color: #000000; border: none;} .image{border-width:0px; border: none;} Firefox is putting a gray border on most of my images. The border is sometimes on the bottom or off to the right. If I add padding to the images sometimes the border will go away. The images are not links. I have basically covered every option in CSS to eliminate the problem with no prevail my CSS: Code: body img{ padding: 0; border:none; -moz-border-radius: 0; -khtml-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 0 #000; -moz-box-shadow: 0 0 0 #000; text-decoration: none; outline:none; overflow: hidden; }
Hopefully someone has encountered this before or has some information to help? Hello all, My website appears fine on Firefox 3.6.7 but not on IE 8 (it is missing the borders on the article text area and the login box is up too high). I notice you can't include URLs in the post for new members so any help is greatly appreciated. Thanks! Hi CSS gurus, I am a bit stuck with the presentation issues I currently have with my website, http://www.tophatweddings.co.uk. Compare the site layout in IE (6 not 7) and look at it in Firefox. In Firefox you'll notice the borders and backgrounds are not displaying correctly. This is what I want to fix. Has anyone got any suggestions for how I can adjust my CSS to make it display properly in Firefox? Please help I have a div in my header that contains an image. The height of the image is 82px. For some reason in firefox (and chrome too) if I don't set the div height to 125px it gets cut off. It looks OK in IE6 without the height set, but with it set as needed for firefox it then creates a space in IE. My header file has: Code:
<div id= "logo" ><img src = "images/logo_LWV.gif"></div>
<div id = "topNav">
<div id = "topNavMenu">
<a class = "top" href="index.php">Home</a>
<a class = "top" href="about.php">About Us</a>
<a class = "top" href="join.php">Join</a>
<a class = "top" href="funds.php">Special Funds</a>
<a class = "top" href="contact.php">Contact</a>
</div> <!-- end topNavMenu -->
</div> <!-- end topNav -->
</div> <!-- end topBar -->
<div id = "imagebar"><img src = "images/lwvCorvallis.jpg"></div>
<div id = "greenbar">
<div id = "pagetitle">
<p>Title</p>
</div><!-- end pagetitle -->
</div> <!-- end greebar -->
and the css is: Code: #topbar
{
dispaly:block; width: 800px;
}
#logo
{
float:left;
}
#topNav
{
float:right;
width: 612px;
height: 65px;
background-color:#cc0033;
}
#topNavMenu
{
position:relative; top:40px;
text-align:left;
color: white;
}
#imagebar
{
display:block;
width: 800px; height:125px;
}
#greenbar
{
display:block;
width: 800px; height: 90px;
background: url(images/greenbar.jpg); background-repeat: no-repeat;
z-index: 0;
}
#pagetitle
{
position:relative; left: 200px;top:25px;
width: 600px;
color: white;
z-index: 1;
}
The site is he http://www.lwv.corvallis.or.us/ What's going on? Screw it. http://www.beckin.com http://www.bestdropshipper.net I just recently updated my firefox to the most available version. This firefox version absolutely sux. I don't know why all these browsers have to keep causing trouble for designers. You will notice that my css style for Beckin Designs no longer works. Code: <style type="text/css">
@font-face {
font-family: English;
font-weight: normal;
src: url(fonts/English_.ttf);
}
</style>
If you view this site in other browsers or the firefox version previous to the latest release you will notice it displays fine. However, not in the new firefox. Next, the best dropshipper menu doesn't display correctly either. How can I go about fixing these issues? Do I need to do some time of if statement. Please let me know exactly how to address these issues. Thanks!! |
|||||||