|
CSS - Skinning Problem [css] Firefox
I've been trying to skin my PHPbb board with little to no succes
http://www.forzacentral.com/test/viewtopic.php?t=1 I cant understand why the above page won't expand the main container when a big image is placed inside. I've tried about everything and it works fine in IE but in firefox it won't expand the main container Similar TutorialsThis is my first OSCommerce site... Where do I adjust the color and size of the title font....the BIG one at the top of each page....is it an h1 tag? I can't seem to find it in the style sheet?? Im using this code in my css file to vertically align the title of a web page to the middle of the div. It works fine in FireFox but in IE its not aligned, its still at the top This is the css code Code: .creswick {
font-family: "Comic Sans MS", Verdana;
color: #365689;
background-color: #D4A102;
}
.creswick2 {
font-family: "Comic Sans MS", Verdana;
color: #FFFF00;
background-color: #D4A102;
}
#Logo {
position:absolute;
height:130px;
width:262px;
left:0px;
top:0px;
}
#Title {
position:absolute;
left:262px;
height:130px;
top:0px;
width:600px;
text-align:center;
vertical-align:middle;
}
#Menu {
position:absolute;
left:0px;
top:131px;
width:262px;
font-size:12;
}
#Content {
position:absolute;
left:277px;
text-align:left;
top:131px;
width:575px;
overflow: visible;
}
#RightSide {
position:absolute;
top:131px;
left:863px;
width:100px;
}
#Right_Side_Top {
position:absolute;
top:0px;
left:863px;
height:130px;
width:100px;
}
website is here http://creswickplaygroup.co.uk/ I seem to be having some problems formatting a <ul><li> element. you can view the page he http://jjs5327.aisites.com/IMD331/index.php a description of the problem is that the "quick links" section has an unordered list that in firefox 3 has an indent but in explorer looks the way I want it too. below is my code: Code:
#left {
background-color:#CCCCCC;
border:1px solid #666666;
width:115px;
height:200px;
float:left;
clear:both;
}
#quicknav {
text-align:left;
margin:0;
padding:0;
}
#quicknav li, #quicknav a {
display:block;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-align:left;
list-style:none;
text-decoration:none;
margin-left:5px;
width:100px;
}
#quicknav a:hover, #quicknav a:focus,
#quicknav a:active{
color: #990000;
}
.quickhead {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
text-align:center;
margin-top:5px;
}
and the HTML:
<div id="left">
<div id="quicknav">
<h2 class="quickhead">Quick Links</h2>
<br />
<ul>
<li><a href="best.php">Best Sellers</a></li>
<li><a href="new.php">What's New</a></li>
<li><a href="sale.php">Sales & Deals</a></li>
</ul>
<br />
<hr />
<br />
<ul>
<li><a href="about.php">About Us</a></li>
<li><a href="faq.php">F.A.Q</a></li>
<li><a href="help.php">Help</a></li>
</ul>
</div>
</div>
Hi, I am trying to work with just getting my companies web site (poor design and I just started ) away from tables. I am trying to duplicate (for practice) the home page but have a problem with padding/margin around the logo, search, etc in the header portion of the site. I would like firefox to display the "header" area similar to how it can be viewed in ie 6.x. I know CSS quite well but have just started getting into the standards, so that is where my knowledge is lacking! Any comments on what I have done so far would be appreciated! Here is the url:http://www.rell.com/rell.html and the code: CSS: PHP Code: body { margin: 0; padding: 0; background-color: #066; font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; } #header { background: url(http://www.rell.com/images/banner_home.jpg) center bottom no-repeat; padding: 1.8em, 0.5em, 0.2em, 1em; } #header form { position: absolute; color: #fff; font-size: 9px; right: 1em; } #header #rellSearch { top: 5.5em; } HTML: PHP Code: <div id="header"> <a href="http://www.rell.com"><img src="http://www.rell.com/images/RELL_logo.gif" border="0" width="178" height="65" alt="Richardson Electronics logo" /></a> <form action="http://catalog.rell.com/rellecom/scripts/QuickSrch.asp" method="get"> Search Online Catalog: <input type="text" name="SKU" maxlength="50" size="6" /> </form> <form id="rellSearch" action="http://search.atomz.com/search/" method="get"> Search RELL.com: <input type="text" size="6" name="sp-q" maxlength="50" /><INPUT type="hidden" name="sp-a" value="000704b8-sp00000000" /> </form> </div> Thank you, cranium Hi there, I am new to this world of web development and this forum. Would be looking for help from all the experienced techies and where possible also help it out. I have written the following code but it is working in IE but not in Firefox. [Code] ______ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Lets Learn, Teach And Educate</title> <meta name="description" content="Education For All"> <meta name="keywords" content="Kids Forum, Kids Education, Kids Fun Learning, Professional Knowledge, Professional Education Material, General Educational Links, General Education Topics"> <style type="text/css"> body { background: url('Graphics\SaraswatiGoddess.jpg') no-repeat center fixed; } </style> </head> <body> <div></div> </body> </html> ________ END CODE Got it validated thru W3C and CSS but still no success. I'm currently working on my first HTML site using CSS and it appears exactly as I want it to on IE, but does not on Firefox. On IE it's centered in the middle of the screen and there are no gaps, but on Firefox it's left justified and there is a gap between a couple graphics. I ran it through an HTML and CSS validator and supposedly it is error-free, so does anyone know what the problem may be? Thanks in advance. Adam http://thesuperbeedesigns.com/Lora/ FYI the page isn't functional, the links don't go to live pages. Hi All, As an avid reader of these forums for sometime, I can usually find the help I need by searching through the posts but my latest problem is killing me. I have spent close to 15 hours trying all kinds of methods to fix it but with no luck. Can anyone help? In IE my page looks fine, just as I want it but firefox throws a fit when viewing on 800 x 600 (as in the nav buttons and text do not align properly, (auto expand, start a new line)). In essense they do not align properly when the nav buttons are forced to wrap. Here is the test page Here is my CSS: (div top is the top banner. div nav is the nav button area.) html Code: Original - html Code div.top{ margin:0px; width:100%; background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$banner_img); background-repeat: repeat; text-align:center; font-family: $font_style; font-size: 24px; color: $site_text_colour; } /*To make the block autostretch on IE*/ * html .top {left:3px;} * html .top {right:3px;} * html .top {width:100%;} div.nav{ margin:0px; width:100%; background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$nav_bg); height:40px; } /*To make the block autostretch on IE*/ * html .nav {left:3px;} * html .nav {right:6px;} * html .nav {width:100%;} * html .nav { height:30px;} .cssnav { position: relative; font-family: arial, helvetica, sans-serif; background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/rollover/$button_colour); border:none; background-repeat: no-repeat; white-space:wrap; display: inline; top:-15px; height: auto; padding-right:5px; width:120px; margin: 0; padding-bottom:10px; } * html .cssnav {top:0px;} .cssnav a { display: inline; color:#000000; font-size: 11px; width: 120px; height: 25px; color: white; text-align:center; text-decoration: none; } .cssnav img {height: 10px; width:120px; border: 0; padding-bottom:5px;} * html .cssnav img { height: 30px; width:120px; border: 0; } * html a:hover {visibility:visible} .cssnav a:hover img{visibility:hidden} .cssnav span { position: absolute; left: 15px; top: 8px; margin: 0px; padding: 0px; cursor: pointer; color:$link_text; text-align:center; font-size:12px; font-weight:bold; }
div.top{
margin:0px;
width:100%;
background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$banner_img);
background-repeat: repeat;
text-align:center;
font-family: $font_style;
font-size: 24px;
color: $site_text_colour;
}
/*To make the block autostretch on IE*/
* html .top {left:3px;}
* html .top {right:3px;}
* html .top {width:100%;}
div.nav{
margin:0px;
width:100%;
background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$nav_bg);
height:40px;
}
/*To make the block autostretch on IE*/
* html .nav {left:3px;}
* html .nav {right:6px;}
* html .nav {width:100%;}
* html .nav { height:30px;}
.cssnav {
position: relative;
font-family: arial, helvetica, sans-serif;
background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/rollover/$button_colour);
border:none;
background-repeat: no-repeat;
white-space:wrap;
display: inline;
top:-15px;
height: auto;
padding-right:5px;
width:120px;
margin: 0;
padding-bottom:10px;
}
* html .cssnav {top:0px;}
.cssnav a {
display: inline;
color:#000000;
font-size: 11px;
width: 120px;
height: 25px;
color: white;
text-align:center;
text-decoration: none;
}
.cssnav img {height: 10px; width:120px; border: 0; padding-bottom:5px;}
* html .cssnav img { height: 30px; width:120px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
.cssnav span {
position: absolute;
left: 15px;
top: 8px;
margin: 0px;
padding: 0px;
cursor: pointer;
color:$link_text;
text-align:center;
font-size:12px;
font-weight:bold;
}
I have messed with above code so much trying to get it right that I know it is a bit of a mess now but scared to change anything in case I mess up IE as well. There is another problem with Firefox in that the hover buttons don't align but that's another story. Any help greatly appreciated. check this link please, once in IE and then in FireFox http://www.acapi.com/en/ and the CSS for the Quick Search background is Code:
.qiqsearch {
background-attachment: fixed;
background-image: url(images/search.jpg);
background-repeat: no-repeat;
background-position: 15px 15px;
}
what should i make to make it appear? This is a css script that works wonderful in IE: [SIZE=2]A:link {font-family:gill sans MT, arial,georgia; text-decoration: none ; font-size:19; COLOR: #B5B8FC} A:visited {font-family:gill sans MT, arial,georgia; text-decoration: none ; font-size:19; COLOR: #B5B8FC} A:hover {font-family:gill sans MT, arial,georgia; text-decoration: none ; font-size:21; color: #faf994;} A:active {font-family:gill sans MT, arial,georgia; text-decoration: none ; font-size:19; COLOR: #B5B8FC} BODY { COLOR: #B5B8FC; FONT-FAMILY: gill sans MT, arial,georgia; BACKGROUND: #000033;} TD { COLOR: #B5B8FC; FONT-FAMILY: gill sans MT, arial,georgia; FONT-SIZE: 16px } #screen {LEFT: 10%; WIDTH: 80%; POSITION: absolute; TOP: 10%; HEIGHT: 80%} #screen IMG { VISIBILITY: hidden; WIDTH: 0px; CURSOR: pointer; POSITION: absolute; HEIGHT: 0px } #canvas SPAN { FILTER: alpha(opacity=99); LEFT: -1000px; WHITE-SPACE: nowrap; POSITION: absolute; opacity: 99 } #bankImages {DISPLAY: none} [SIZE=2] But when it comes to firefox, the links on top if the script does not work at all. How can I place the A:link, A:visited, A:hover, A:active somewhere, in the HTML or in a separate css and make it work? If I just use the links A:link, A:visited, A:hover, A:active and a BODY {COLOR: #B5B8FC; FONT-FAMILY: gill sans MT, arial,georgia; BACKGROUND: #000033;} in a css it will work in both IE and firefox. greatful for some help! Hanna Da Site Here Check the site out first in IE6, the index page displays correctly with the images as backgrounds for tables (yes I know tables are not good in my situation, but its what I have). Then look at the site in FF, the images I desginated as backgrounds in the tables will not display. Also the border color for the tables on the index page will not display whit in FF. I dont know why the code would work in IE and not FF. Can someone please hlep me out. If i use style tags instead of CSS I can make the images display... Hello, I'm new to CSS.. I made my design in Photoshop.. Sliced it.. and then set the design through the CSS.. I set the complete design and it looks great in IE but when I see it in Firefox it is completely out of order.. Can anyone please guide me what is the problem? I can give you my CSS if you require.. Have you ever seen this kind of problem before.. What am I doing worng? I will really appreciate your help in this regard. Cheers! My site renders properly using Firefox (and Opera), but IE skews the format entirely. Looks like the table cells aren't correct, but I've double checked the code and all the tables appear to be right. I don't know if there are CSS incompatibilities with IE, but would appreciate some helpful assistance from the forum. http://markswebsite.net/dev5 html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Lederer's Sound</title> <meta name="DESCRIPTION" content="home audio system, audio conferencing system, sony audio system, audio visual system, micro audio system"> <meta name="KEYWORDS" content="home audio system, audio conferencing system, sony audio system, audio visual system, micro audio system"> <meta name="COPYRIGHT" content="Lederer's Sound"> <meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT"> <meta http-equiv="CHARSET" content="ISO-8859-1"> <meta http-equiv="content-LANGUAGE" content="English"> <meta name="RATING" content="General"> <meta name="ROBOTS" content="index,follow"> <meta name="REVISIT-AFTER" content="7 days"> <link href="includes/main.css" rel="stylesheet" type="text/css" /> <!--<link href="includes/sfd.css" rel="stylesheet" type="text/css" />--> </head> <body> <div id="frame"> <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white"> <tr> <td width="49%"><img src="images/lederers_sound.gif" alt="Lederer's Sound" width="366" height="63"></td> <td width="51%"> <div align="right"><img src="images/call3.gif" alt="Call us (703) 532-2400" width="313" height="67" border="0" usemap="#Map2"></div> </td> </tr> </table> <hr> <div id="contentleft"> <div id="leftinfo"> <div id="search"> <table width="100%" border="0" cellspacing="3" cellpadding="3"> <tr> <td height="33" valign="middle"> <form action="index.htm." name="srchform"> <input type="text" id="srchtxt" name="SS" size="10" maxlength="125" value="Search Store" onfocus="this.value='';this.style.background='#FFFFFF'" class="input"> <input type="submit" value="Go"> <input type="hidden" name="PR" value="-1"> <input type="hidden" name="TB" value="A"> <input type="hidden" name="SHOP" value=""> <input type="hidden" name="ACTINIC_REFERRER" value="index.html"> </form> </td> </tr> </table> </div> <!-- end search --> <hr> <div id="store"> <a href="index.html"><img src="images/Store_000.gif" width="120" height="37" hspace="13" border="0"></a> </div> <!-- end store --> <hr> <div id="leftnav"> <br> <table width="159" border="0" cellspacing="1" cellpadding="1"> <th align="left"><u>Products</u></th> <tr> <td width="129"> <a href="intercoms/index.html">Home Intercoms</a><br> <a href="pasystems/index.html">Portable PA Systems</a><br> <a href="index.html">Megaphones</a> <br> <a href="index.html">PA Amplifiers</a><br> <a href="index.html">Message Repeaters</a><br> <a href="microphones/index.html">Microphones</a><br> <a href="index.html">Audio Security Masking</a><br> <a href="remote_ventilators/index.html">Remote Ventilator Alarms</a><br><BR><BR> </td> </tr> </table> <table width="159" border="0" cellspacing="1" cellpadding="1"> <th align="left"><u>Services</u></th> <tr> <td width="129"> <a href="index.html">Corporate Services</a><br> <a href="index.html">Installations</a><br> <a href="index.html">Hire Services</a> <br><br> </td> </tr> </table> </div> <!-- leftnav --> <hr> <p> <div id="leftnav"> <table width="100%" height="170" border="0" cellspacing="1" cellpadding="1"> <tr> <td width="129" align="left"><br> <a href="news.html">News</a><br> <a href="links.html">Links</a><br> <a href="ordering.html">Ordering</a><br> </td> </tr> </table> </div> <!-- leftnav --> </div> <!-- leftinfo --> </div> <!-- contentleft --> <div id="contentcenter"> <div id="content_header"><img src="images/header_home.gif" width="585" height="165"> </div> <hr> <table cellpadding=10> <tr> <td> Lederer's Sound has been family owned and operated for over 25 years. We offer friendly and personalized service. Call or <a href="mailto:lederersnd@aol.com">email</a> us with any questions you may have with your existing system, or if you are interested in repairs or updating. We will be happy to help you! <p> Free estimates/Washintgon, DC/Metro area. </td> </tr> </table> </div> <!-- contentcenter--> <div id="quickfind"> <h3>Product Quick Find</h3> <table border="0" cellspacing="7" cellpadding="7" align="center""> <tr> <td width="70" align="center"><a href="intercoms/index.html"><img src="images/home_intercoms.jpeg" alt="Home Intercoms" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="pasystems/index.html"><img src="images/portable_pa_systems.jpeg" alt="Pa Systems" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="index.html"><img src="images/megaphones.jpeg" alt="Megaphones" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="index.html"><img src="images/pa_amplifiers.jpeg" alt="PA Amplifiers" width="70" height="57" border="0"></a></td> </tr> <tr> <td align="center"><a href="intercoms/index.html">Home Intercoms</a></td> <td align="center"><a href="pasystems/index.html">Portable PA Systems</a></td> <td align="center"><a href="index.html">Megaphones</a></td> <td align="center"><a href="index.html">PA Amplifiers</a></td> </tr> <tr> <td width="70" align="center"><a href="index.html"><img src="images/message_repeaters.jpeg" alt="Message Repeaters" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="microphones/index.html"><img src="images/qk_mic.jpg" alt="Mics" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="index.html"><img src="images/audio_security.jpeg" alt="Audio Security" width="70" height="57" border="0"></a></td> <td width="94" align="center"><a href="remote_ventilators/index.html"><img src="remote_ventilators/images/fcsystem.jpg" alt="Remote Ventilator Alarms" width="70" height="57" border="0"></a></td> </tr> <tr> <td align="center"><a href="index.html">Message Repeaters</a></td> <td align="center"><a href="microphones/index.html">Mics</a></td> <td align="center"><a href="index.html">Audio Security Masking</a></td> <td align="center"><a href="remote_ventilators/index.html">Remote Ventilator Alarms</a></td> </tr> </table> </div> <!-- quickfind --> <div id="footer"> <p>Copyright 2006 Lederer's Sound<br> <a href="index.html">Contact Us</a> | <a href="index.html">Disclaimer</a> | <a href="index.html">Terms & Conditions</a></p> </div> </div> <map name="Map2" id="Map2"> <area shape="rect" coords="257,8,307,58" href="mailto:lederersnd@aol.com" alt="Email Us"> </map> </body> </html>
css Code: Original - css Code /* CSS Document */ body { text-align:center; background: #BEBEBE url(images/bg-vert.jpg) repeat-x 50% 0; font-family:Verdana, sans-serif; font-size: 75%; line-height: 1.5em; margin: 0px 0px; color:#858585; } /* ---[ links ]------------------------------- */ a:link { color: #858585; } a:visited { color: #858585; } a:hover { color: #666666; } #frame { position: relative; margin: 0 auto; padding: 0; text-align: left; font-size: 95%; width: 750px; border-left: 1px solid #666; border-right: 1px solid #666; background: url(images/frame-bg.gif); } #hdr { height:68px; background:#fff; } /*----------------Nav-------------------*/ #search { width: 100%; padding:0px; background:#F0F0F0 url(bg-srh.gif) no-repeat; } #store { width: 100%; padding:0px; background:#F0F0F0 ; } #contentleft { width:150px; padding:0px; float:left; background:#ccc; border-top:1px solid #D4D4D4; } #leftinfo { width:159px; padding:0px; float:left; background:#fff; } #leftnav { padding-left:3px; background: #F0F0F0; border-bottom:1px solid #D4D4D4; } #leftnav table { padding: 0px; margin: 0px; border-collapse: collapse; } #contentcenter { width:585px; padding:0px; float:right; padding-left:8px; background:#fff; } #content_header { padding: 0 0; margin: 0 0; height: 165px ; } #content_header2 { padding: 0 0; margin: 0 0; height: 228px ; } #quickfind { float:right; width:575px; padding:5px 5px; background-color: #FFF; border-top: 1px solid #D4D4D4; } /*------ text --------------*/ .productheading { font-weight:bold; font-size:13px; }
Thanks! I'm in the process of switching my table driven site to a CSS one. I guess I'm having trouble with positioning, I have all the text stuff pretty down, but this is giving me troubles. Here is what it should look like, (screen from IE) http://www.samuraiblog.com/utl1.jpg Here is what it looks like in anything but IE (screen from Firefox) http://www.samuraiblog.com/utl2.jpg Here is my CSS snippet: Code: h3{
color:#666666;
font-size:medium;
font-variant:small-caps;
letter-spacing:.1ex;
border-top:1px solid #999999;
border-bottom:1px solid #999999;}
#title {
width: 800;
height: 250;
position: absolute;
top: 0;
left: 0;
backround-color: white;
}
#b-title {
width: 800;
height: 166;
position: absolute;
top: 250px;
left: 0px;
backround-color: black;
}
#quote {
position: absolute;
top: 270;
left: 16;
float: left;
height:70;
width: 700;
}
and here is direcly from HTML, Code: <div id="title">
<table id="Table_01" width="800" height="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="images/title-nav_01.jpg" width="800" height="192" alt=""></td>
</tr>
<tr>
<td>
<img src="images/title-nav_02.jpg" width="223" height="58" alt=""></td>
<td> <a href="/blogs"><img src="images/title-nav_03.jpg" alt="" width="98" height="58" border="0"></a></td>
<td> <a href="/forums"><img src="images/title-nav_04.jpg" alt="" width="133" height="58" border="0"></a></td>
<td> <a href="/folding"><img src="images/title-nav_05.jpg" alt="" width="136" height="58" border="0"></a></td>
<td> <a href="/the-arts"><img src="images/title-nav_06.jpg" alt="" width="210" height="58" border="0"></a></td>
</tr>
</table>
</div>
<div id="b-title"><img src="images/title-bottem.jpg" width="800" height="166" /></div>
<div id="quote">
<h3>"There once was a man from nan tucket and he sat on a bucket and read
computer Magizines all day long..." -Sam</h3>
</div>
Any suggestions? Thanks, -Sam I am trying to assign a background to footer div, it appears fine with internet explorer, but it does not appear at all with firefox. http://www.refinethetaste.com/html/ Hi I'm having a problem with padding <a> tags in firefox i have a div inside another div. I'm using the 2nd div as a button but it doesn't fit inside the containing div. The top and bottom stick out. Any clues? here is my code: Code: <html>
<head>
<style type="text/css">
.mybox {
border: 1px solid #000000;
}
.buttonbox{
/*padding: 5px;*/
}
.buttonbox a{
padding: 5px;
background-color: #33F4FF;
border: 1px solid #FF0000;
}
.buttonbox a:hover{
background-color: #EBF4FF;
}
</style>
</head>
<body>
<div class="mybox">
<div class="buttonbox"><a href="asdfasfd">buttonbox</a></div>
</div>
</body>
</html>
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? I'm trying to make a 2 column layout, using multiple divs, but no wrapper divs. I cannot use wrappers around either column. This works fine in IE7, but in FireFox the fisrt right column element isn't top aligned; it starts on the same line as the last left column element. Does anyone have any ideas? Thanks! .left { float:left; clear:left; margin-left:25px; width:605px; text-align:left; } .right { float:right; clear:right; margin-right:25px; width:285px; } <div id="one" class="left">left</div> <div id="two" class="left">left</div> <div id="three" class="right">right</div> <div id="four" class="right">right</div> <div id="five" class="right">right</div> my goal is this: left___right left___right ______right Hi! Having a problem again with firefox! On IE6 the links in the bottom news bar work fine, in firefox, only two of them work! Its a little strange! Output at www.generating-sets.com Validated the markup and the CSS and they validate fine! (apart from the buggy PHPSESSID issue and my use of marquee which is due to be removed shortly). CSS below: PHP Code: html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(images/newback.jpg); background-position:top right; background-repeat:repeat-y; background-color:#ffffff; font-family: sans-serif; font-size: .7em; } #wrap { background-image:url(images/newback150px.jpg); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} div#navbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#formbox { color: #000000; padding: 2%; border: #000044 solid 1px; } div.displaybox { color: #000000; padding: 2%; margin: 1%; border: #000044 solid 1px; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left; font-size: 1.1em; } div#userbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#topleveladminbar { padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px } #header { background-color: #000044; background-image:url(images/wel.jpg); width: 100%; background-repeat: repeat; border-bottom: 2px #000000 solid; color: #ffffff; margin:0; padding:0; height:100px; } #left { float:left; width:149px; background-image:url(images/newback.jpg); background-repeat: repeat; color: #ffffff; text-align:center; background-color: #000044; border-right: 1px #000000 solid; } #main { position:relative; margin-left:200px; } #content { text-align:center; padding:4px; margin-right:200px; margin-bottom:160px; text-align:left; } #clearfooter { clear:both; height:80px; overflow:hidden; } #footer { height:40px; background-color: #000044; border-top: 2px #000000 solid; margin:0; padding:0; background-image:url(images/newback.jpg); background-repeat: repeat; margin-top:-0px; color: #ffffff; text-align:center; } div#newsbar {padding: 0%; text-align: left; height:150px; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-left: +150px; margin-right: +10px; margin-top: -180px; border: 2px #000000 solid; width: auto;} code { font-size:0.8em; border:1px solid navy; background-color:white; color:#333333; padding:10px; display:block; width:80%; margin:10px auto; overflow:auto; } h1 {font-size: 1.4em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h2 {font-size: 1.3em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h3 {font-size: 1.2em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h4 {font-size: 1.1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h5 {font-size: 1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} a:link {color: #ffffff; text-decoration: underline;} a:visited { color: #ffffff; text-decoration: underline;} a:hover {color: #ffffff; background-color: #0000FF; text-decoration: underline;} .displaybox a:link {color: #0000FF; text-decoration: underline;} .displaybox a:visited { color: #0000FF; text-decoration: underline;} .displaybox a:hover {color: #000044; background-color: #EEEEEE; text-decoration: underline;} |
|||||||