|
CSS - Float Img.right Problem In Firefox Need Help To Correct My Code
Similar TutorialsHi! Please help me again! I cannot figure this out. I have tried striping out everything out to see if I could figure out what was causing it -- I can't. This one part is not working - everything else is fine. When I take this out I have no problems. Basically, i'm trying to have an image with text next to it (without it wrapping around the image). In IE it works. In Firefox the text drops below the image. Here is the code stripped out. Unfortunately, I cannot access and FTP to upload this - but I don't think that should matter. Please, What am I doing wrong? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>ARGH</title> </head> <body> <div style="margin-left:10px; margin-top:10px; width: 90%;"> <div style="float: left; padding-right: 10px;"> <img src="images/img.jpg" width="200px" height="100px" border="1"> </div> <div style="float: left;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tellus purus, aliquet ut, posuere vitae, ullamcorper at, sapien. Donec vel sapien a lorem vehicula imperdiet. Aliquam a nunc sed lectus rhoncus imperdiet. Maecenas commodo scelerisque nulla. </div> </div> <div style="margin-left:10px; margin-top:10px; width:90%;"> <div style="float: left; padding-right: 10px;"> <img src="images/img.jpg" width="200px" height="100px" border="1"> </div> <div style="float: left;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tellus purus, aliquet ut, posuere vitae, ullamcorper at, sapien. Donec vel sapien a lorem vehicula imperdiet. Aliquam a nunc sed lectus rhoncus imperdiet. Maecenas commodo scelerisque nulla. </div> </div> <div style="clear: both;"></div> </body> </html> The site is he http://andamu.org/main/yarn/ or "andamu.org /main /yarn" The appearance of the date, byline, comments/trackbacks and tags on the left, aligned beneath one another in IE 8 is the desired appearance. In Firefox, the date appears in the correct spot, but the rest appears to its right instead of below it. (I am modifying the Pico theme in MT5.) I'll try to get the relevant bits here, but please ask if I can provide more detail. The html part: html4strict Code: Original - html4strict Code <h2 class="date-header">September 6, 2010</h2> <div class="asset-footer"> <p class="asset-footer-info"> <span class="byline"> <span class="vcard author">Sivani</span> at <abbr class="published" title="2010-09-06T18:47:04-08:00"> 6:47 PM</abbr> </span> <span class="separator"><br /></span> <a href="http://andamu.org/main/yarn/2010/09/the-socks-of-doom---part-ii-sucked-in-again.html#comments"> No Comments</a> <span class="separator"><br /></span> <a href="http://andamu.org/main/yarn/2010/09/the-socks-of-doom---part-ii-sucked-in-again.html#trackbacks"> No TrackBacks</a> </p> </div> <!-- class="asset-footer" -->
The css part: Code: .date-header {
float: left;
text-align: right;
padding: 5px 20px 4px 0;
margin-left: 20px;
border-right: 1px solid #eee;
width: 128px;
color: #999;
}
.asset-footer {
float: left;
text-align: right;
padding: 5px 20px 4px 0;
margin-left: 20px;
border-right: 1px solid #eee;
width: 128px;
color: #999;
clear: all;
}
Note: I have tried using clear: all; in the .date-header to no effect. Ok ive got this small concept i need to work in order for me to implement it on the actual website. this code works 100% correct to how i want it to in FireFox. I have an image within a table TD tag , but i need the image to float outside the tables borders, i can do this with the margin-right: -20px; In firefox i can still see the full image been displayed, but in IE the image falls behind the table limits and then does not display any more. Please help me sort this one out. Code: <html>
<head>
<title>Untitled</title>
<style>
.test {
margin-right: -30px;
float: right;
z-index: 2;
}
.table{
z-index: 10;
}
</style>
</head>
<body>
<table align="center" width="300" border="1" class="table">
<tr>
<td> </td>
<td><img class="test" src="http://nexxon.galore.co.za/images/stories/animated_slidshow_02gif.gif" /></td>
</tr>
</table>
</body>
</html>
Hi all, I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage: http://www.houseofhawkins.com/index.html which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text. They are links with the following CSS attached: div#Header #MenuSection a.MenuTab { PHP Code: filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0'); font-weight: bold; text-align: center; font-size: 1.3em; background-color: #BCD6BC; border-style: solid; border-width: 1px; border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5; margin: 0 5px 0 2px; height: 1.5em; width: 140px; padding: 5px 1px 1px 1px; } div#Header #MenuSection { float:left; margin-top: 30px; } here is the HTML code for that part of the page. PHP Code: <div ID="MenuSection"> <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a> <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a> <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a> <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a> <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a> </div> <div style="clear:left"> </div> I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work! I wish to understand why its like this... I have attached the CSS and the file if that helps anyone. Thanks for the help and advice. Well, I'm redesigning my site because the current php management system was thrown together in a hurry just to get it up there. Now I've got time to redo it and I want to do it right. It's a webcomic site. Currently, the site has an XML layout that serves XHTML after a serverside transformation. What I want to do is lay the site out now so I can define my xsl. The basic "gist" of the situation is, i want it to be as accessible as possible(even though blind people may not be able to see the images, they deserve to surf my website.). With that, I want my content to show up before my link area, so they can easily get to the content without listening to a long list of links first. So what I've done in firefox was repositioned the div tags that held the content above the div section that held the link boxes. That's fine and dandy, where's my point? I still want the linkboxes to appear on the lefthand side of the page and the content on the right. In firefox, I used float:right;margin-right:5%; for the content and float:left on the link boxes. It works fine in firefox. The boxes appear on the left and content on the right. However, in IE the content appears on the right, but the link boxes appear on the left of the next line. Here is relelvant code: html Code: Original - 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> <title>AdrienComix</title> <style type="text/css"> #body{ margin:0; } .header{ margin-bottom:10px; width:100%; height:15%; color:#000000; background-color:#00BBFF; background:url(http://www.adriencomix.com/res/head.jpg); border:1px dashed; text-align:center; font-size:20pt; } .box{ border:1px dashed; margin-bottom:30px; margin-left:2px; padding-left:5px; width:100%; background-color:#00BBFF; color:#000000; } .left{ width:15%; height:85%; float:left; } .content{ width:74.6%; height:100%; margin-left:5%; float:right; padding-right:5%; } .comic{ text-align:center; padding-top:15px; padding-bottom:15px; } .emp{ text-align:center; padding-top:20px; font-size:150%; font-weight:bold; } </style> </head> <body id="body"> <div class="header"><p>AdrienComix</p></div> <div class="content"> <div class="emp">Happy New Year!</div> <div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div> <div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div> <div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div> </div> <div class="left"> <div class="box"> <center><h3>Links</h3></center><br/> <a href="http://www.sluggy.com">Sluggy Freelance</a><br/> <a href="http://www.nuklearpower.com">8-bit Theater</a><br/> <a href="http://www.slackware.com">Slackware Linux</a><br/> <a href="http://www.gnu.org">GNU</a><br/> <a href="http://www.kernel.org">Linux Kernel</a><br/> <a href="http://www.google.com">Google</a> </div> <div class="box"> <center><h3>Archive</h3></center><br/> <a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/> <a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/> <a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/> <a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/> <a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/> <a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/> <a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/> <a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/> <a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/> <a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/> </div> </div> </body> </html>
<!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>
<title>AdrienComix</title>
<style type="text/css">
#body{
margin:0;
}
.header{
margin-bottom:10px;
width:100%;
height:15%;
color:#000000;
background-color:#00BBFF;
background:url(http://www.adriencomix.com/res/head.jpg);
border:1px dashed;
text-align:center;
font-size:20pt;
}
.box{
border:1px dashed;
margin-bottom:30px;
margin-left:2px;
padding-left:5px;
width:100%;
background-color:#00BBFF;
color:#000000;
}
.left{
width:15%;
height:85%;
float:left;
}
.content{
width:74.6%;
height:100%;
margin-left:5%;
float:right;
padding-right:5%;
}
.comic{
text-align:center;
padding-top:15px;
padding-bottom:15px;
}
.emp{
text-align:center;
padding-top:20px;
font-size:150%;
font-weight:bold;
}
</style>
</head>
<body id="body">
<div class="header"><p>AdrienComix</p></div>
<div class="content">
<div class="emp">Happy New Year!</div>
<div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div>
<div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div>
<div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div>
</div>
<div class="left">
<div class="box">
<center><h3>Links</h3></center><br/>
<a href="http://www.sluggy.com">Sluggy Freelance</a><br/>
<a href="http://www.nuklearpower.com">8-bit Theater</a><br/>
<a href="http://www.slackware.com">Slackware Linux</a><br/>
<a href="http://www.gnu.org">GNU</a><br/>
<a href="http://www.kernel.org">Linux Kernel</a><br/>
<a href="http://www.google.com">Google</a>
</div>
<div class="box">
<center><h3>Archive</h3></center><br/>
<a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/>
<a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/>
</div>
</div>
</body>
</html>
Is there any way that I can make it appear on the same line in IE without breaking the layout in firefox and keeping the page accessible? 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 I am having an issue with a div that I am trying to float and set the width of. The page works fine in Firefox, but in IE it doesn't display correctly, Here is the pertinent code, <div id="textbar" class="sidebar" style="width:175px;"> <div id="handle"> <a href="#"><img src="http://swvtc06/swvtc/images/collapse.jpg" border="0" alt="Click to Collapse the Navigation Bar" onclick="sidebar()" /></a> </div> <div id="sbText" style="display:block;"> <!--#include virtual="/swvtc/include/nav_test.htm" --> <!--#include virtual="/swvtc/include/smweather.asp" --> </div> </div> Here is the CSS for the #handle div, #handle { float:right; width:9px; } In Firefox, the handle div is correctly inline with the background graphic. In IE, the handle div is about 9 pixels to the left of where it should be. We are in the ancient times, we still are mandated to be using IE 6, so that is where I am having the problems. Where am I going wrong? Thanks, Drew I seem to have an issue with the float parameter in Firefox. If you look at the following URL in IE, it should display fine, but in firefox the container doesn't expand to hold the div's within, as they're floated. I've seen other people use floats just fine in firefox, but it doesnt' seem to work for me.. http://www.arestaenterprise.com/enf/ Any help is appreciated Thanks! Please look at this page - http://www.eagletransmission.net/testimonials.asp In IE7 I have the main navigation alignment as I want it to be. BUt in Firefox the links do not align correctly. For example please look at the link for Affiliates. In Firefox it is pushed to the right instead of centered where it should be. Thanks. Does anyone know why the clear: left isn't working on firefox 1.0 on this page. Generic Page with floating divs and then clearing them for a new line. http://section31.us/temp/float_boxes.html Am I doing something wrong or is this a bug? After hours of Google searching and working to find a solution, this is my last gasp. I'll qualify it by saying I'm a casual hobbiest, not a pro at all. In plain text, my problem is that I have a string of boxes I want to appear side-by-side...float: left. In firefox, on a hard refresh, these elements don't appear side-by-side, but on top of each other. It works just fine in IE. Example... Should be: 1 2 Is: 1 2 Below is my code. To see the problem in action, http://www.mcconaha.com Also, the code isn't great, and I know that. I'm building everything now, but can't get past this problem. Code: body{
background-color:#666666;
background-image: url(../images/header-back3.jpg);
background-repeat: repeat-x;
text-align: center;
margin-top: 0px;
}
div#header{
text-align:center;
}
div#nav {
margin-top: 20px; }
div#daybox {
width: 100px;
border: #333333;
border-style:solid;
border-width: 2px;
background: #E0E0E0;
margin-top: 35px;
margin-right: 10px;
margin-left:auto;
float:left;
height: 250px;
display:block;
}
div#daybox p {
font: Arial;
font-size:9px;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
padding: 5px;
margin: 0;
display: inline;
}
div#dayboxthumb img{
margin: 0;
padding: 5px;
background: #FFFFFF;
border: none;
border-style: none;
display: inline;
}
div#featuredimage {
margin-top: 50px;
}
div#featuredimage img {
padding: 15px;
background:white;
border:1px solid black;
}
div#gallerycontainer {
margin-top: 35px; }
.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 */
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=iso-8859-1" /> <title>Untitled Document</title> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <link href="css/stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"><img src="images/logo.jpg" /></div> <!-- yeah, it's a table to center it. I spent way too long trying to do it with css --> <table cols="1" align="center" border="0" ><tr><td align="center"> <div id="daybox"> <div id="dayboxthumb"> <a href="http://www.mcconaha.com/upload/2006/10/31/chuq1.jpg" rel="lightbox[lchuqhalloween]" title="smack" ><img src="http://www.mcconaha.com/upload/2006/10/31/chuqthumb.jpg" border="0"></a><a href="http://www.mcconaha.com/upload/2006/10/31/chuq2.jpg" rel="lightbox[lchuqhalloween]" title="smack" ></a> </div> <img src="http://www.mcconaha.com/images/dates/October.jpg" /> <img src="http://www.mcconaha.com/images/dates/31.jpg" /> <img src="http://www.mcconaha.com/images/dates/2006.jpg" /> <p>Chuq's office Halloween.</p> </div> <div id="daybox"> <div id="dayboxthumb"> <img src="http://www.mcconaha.com/photos/thumb1.jpg"> </div> <img src="http://www.mcconaha.com/images/dates/October.jpg" /> <img src="http://www.mcconaha.com/images/dates/30.jpg" /> <img src="http://www.mcconaha.com/images/dates/2006.jpg" /> <p>This is a test entry.</p> </div> </td></tr></table> </div> <div id="nav"> <img src="images/navmap.jpg" width="257" height="26" border="0" alt="" usemap="#navmap_Map"></a> <map name="navmap_Map"> <area shape="rect" alt="archives" coords="178,0,256,26" href="http://www.mcconaha.com/archives.php"> <area shape="rect" alt="contact" coords="79,0,154,26" href="mailto:contact AT mcconaha DOT com"> <area shape="rect" alt="about" coords="0,0,56,25" href="http://www.mcconaha.com/about.php"> </map> </div> </body> </html> At this point, I have no idea what to do. Given all the Googling, not many other people do either. Any suggestions on this would be helpful if I'm wrong about it being part of a well-known FF bug... HTML: Code:
<div id="title" class="title_lower_color">
<div class="title">TITLE</div>
</div>
<div id="main">
<div class="grouptitle1">Group 1
<div class="grouptext1">blah blah blah blah blah blah blah blah
</div>
</div>
<div class="grouptitle2">Group 2
<div class="grouptext2">blah blah blah blah blah blah blah blah
</div>
</div>
</div>
CSS: Code:
body {
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
}
.title {
font-family: "Times New Roman", Times, serif;
font-size: 24px;
color: #000000;
font-weight: bold;
background-color: #CCCCCC;
border-color: #000000;
border-bottom-style: solid;
border-bottom-width: thin;
width: 100%;
float: left;
position: relative;
}
.title_lower_color{
background-color: #666666;
border-color: #000000;
border-left-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-top-width: thin;
width: 100%;
height: 40px;
float: left;
position: relative;
}
.grouptitle1{
color: #000000;
font-style: normal;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
position: relative;
background-color: #CCCCCC;
border-color: #000000;
border-style: solid;
border-width: thin;
margin-top: 10px;
width: 300px;
float: left;
}
.grouptitle2{
color: #000000;
font-style: normal;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
position: relative;
background-color: #CCCCCC;
border-color: #000000;
border-style: solid;
border-width: thin;
margin-top: 10px;
margin-left: 10px;
float: left;
}
.grouptext1 {
color: #000000;
font-style: normal;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: normal;
position: relative;
background-color: #FFFFFF;
border-color: #000000;
border-top-style: solid;
border-top-width: thin;
width: 300px;
}
.grouptext2 {
color: #000000;
font-style: normal;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: normal;
position: relative;
background-color: #FFFFFF;
border-color: #000000;
border-top-style: solid;
border-top-width: thin;
}
I've only just started using CSS rather than tables. The title bit is ok. The problem is the main <div>. In Firefox l can't seem to get the two divs (grouptitle1 & grouptitle2) to float side by side. The only way l can do it is by setting grouptitle2 to a certain width. But l want grouptitle2 to fill the remaining width of the screen whatever size the browser is and not be a set width. Is there any way so that l can make the two divs appear side by side without adding a width to the grouptitle2?? here's a working version: Clicky Hi there developers! im new here and desperately trying to be resonable at developing myself! i basically have an issue with my css, which is causing one of my drop down menus to appear slightly to the right in internet explorer - it looks spot on in firefox. i've googled this soooo much and heard about the 5 pixels problem between any browser and ie, but i cannot seem to fix it with all my changes made. see image - highlighted in red! Code: URL can anyone help me tidy this mess up please? this has taken me so long, because i wanted the locations of the drop downs to stay exactly in proportion when people zoom in and out of their browsers. html code: <div id="columnSubTop"> <div class="submenudropdown"> <div class="floatLeft width25 padL300 padTOP25"> <form action="search_for_vouchers_by_town" method="post" name="search" id="search"> <select name="fldCountyID"> <option value="">Please Select</option> <% While (NOT CountyList.EOF) %> <option value="<%=(CountyList.Fields.Item("fldCountyID").Value)%>"><%=(CountyList.Fields.Item("fldCountyName").Value)%></option> <% CountyList.MoveNext() Wend If (CountyList.CursorType > 0) Then CountyList.MoveFirst Else CountyList.Requery End If %></select> </div> <div class="floatRight width25 padR10 padTOP25"> <select name="fldTownID"> <% While (NOT TownList.EOF) %> <option value="<%=(TownList.Fields.Item("fldTownID").Value)%>"><%=(TownList.Fields.Item("fldTownName").Value)%></option> <% TownList.MoveNext() Wend If (TownList.CursorType > 0) Then TownList.MoveFirst Else TownList.Requery End If %></select> </div> </div> <div class="submenubutton"> <input type="image" src="images/search_button.gif" alt="Submit button" /> </form> </div> </div> CSS code: #columnSubTop { height: 85px; width:940px; margin: 0 auto; float:left; background-image:url(../images/css/subheader.gif); background-position: top left; background-repeat: no-repeat; clear:none; } .submenudropdown{ float:left; width:750px; } .submenubutton{ float:right; margin:0 auto; padding:24px 62px 0 0; } This is my code essentially: <div id="bottom"> <div style="float:left">store hours</div> <img src="map"> <div style="float:right">contact info</div> </div> It looks fine in Safari but it messed up in Firefox. I fixed it a bit by adding overflow:auto to the parent item (bottom div), so it actually has the red background and doesn't collapse. I haven't yet uploaded that fix yet as the problem still isn't solved. Now the div is expanding too much because the 3 items aren't being displayed inline. In firefox the image is pushing the first div beneath it. Any solutions please? Hi, I have been beating my head against the wall here. My video position in firefox shows up over top of my other nested divs/classes. www.binaryshopper.com The site renders perfect in IE. When you spend more time on CSS than programming, something is wrong! I love CSS but it still doesn't do what it was intended to do. After years of CSS, you still have better control over layout using crappy tables!! Can someone please help me here before I start shooting Firefox developers? Hi, I have been a CSS/XHTML developer for about 6 months now and I just came accross a problem that I have had difficulty solving... I have spent about a week on this problem, and still no luck... I kind of restarted too with no luck... I am thinking this may be a bug... But it works fine in IE... In firefox, the content division background does not continue, instead a footer background is moved up... This is so weird, I dont know how this can be possible... This has been extremely frustrating... If anyone can help, that would be great! Thanks a lot! In a nutshell, I want the following page: http://kznf.com/test/example.html to display in IE7 how it does in FF3 and Safari 3.1 The only "solution" I've been able to come up with is to enforce a width on some wrapping div. The problem is that sometimes I want it to have a wider width, as seen in example2 http://kznf.com/test/example2.html Am I doing something wrong? Is there some ridiculous IE7 only solution out there somewhere? I've googled and searched forums and I'm about to give up and go back to table based layout! Someone help! 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" xml:lang="en" lang="en">
<head>
<title>fieldset Test</title>
<style type="text/css">
.floatleft1
{
width: 100px;
height: 100px;
background-color: green;
border: 1px solid #000;
float: left;
clear: left;
}
.floatleft2
{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #000;
float: left;
}
.previousLine
{
float:left;
clear:none;
}
</style>
</head>
<body>
<div class="floatleft1">apple</div>
<div class="floatleft2">red</div>
<div class="floatleft1">banana</div>
<div class="floatleft2">yellow</div>
<div class="floatleft1 previousLine">really?</div>
<div class="floatleft2">yes</div>
<div class="floatleft1">plum</div>
<div class="floatleft2">purple</div>
</body>
</html>
Hello, this is my first attempt at a website and first attempt at using CSS as well. With much reading and the help of an online CSS layout creator I've been able to get pretty far, but have been having many roadblocks recently. For instance, the second heading in my layout is not displaying correctly in IE, but looks fine in FireFox. Please take a look at http://www.onlinecasinoboss.com/new_page_1.htm The second heading should lay directly underneath heading number 1, with a 2px margin in between header 2 and the main page layout. Also the text in the right, left and center columns starts as if it had a 12px or greater top margin. This problem exists in BOTH IE and FF. Please help, and thanks for anyone that takes the time to help a newbie web designer out. subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) |
|||||||