|
CSS - Display Problem In Ie And Mozilla Need Some Help Please
Hi,
I am having problems with the layout in IE and Mozilla Whats happening is i have a 3 colummn layout but i dont see the footer in both browsers Second problem is the right hand div i want it to extend till the bottom of the footer white is the background color for the right hand nav Normally the right hand will have more text content then the left hand div will have Third problem is in IE there is a huge gap between the top horizontal nav after contact me button and the gap is smaller in Mozilla Fourth problem is the left hand nav width problem in mozilla in IE it aligns right at the end of the Selling tab. In mozilla its little bit less them the selling tab Can someone tell me what i am doing wrong 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>Realtor.</title>
<link href='style1.css' type='text/css' rel='stylesheet' />
<style type="text/css">
#dlmenu {height:10em;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:183px; background:#B0C4DE; z-index:100;}
#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background:#1874CD center center; color:black; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {background:#1874CD;}
#menu table {border-collapse:collapse; padding:0; margin:-4px;}
#menu dl {width: 183px; margin: 0; background: #B0C4DE; cursor:pointer;}
#menu dt {margin:0; padding: 0; border-top:1px solid #cce;}
#menu dd {margin:0; padding:0; text-align:left; }
.gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 10px; background: #007FFF center center;}
.gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background: #1874CD;}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover {background:black; color:#1874CD;}
</style>
</head>
<body style="background:#B0C4DE;">
<div class="page_wrapper">
<div class="page_header"></div>
<div class="menu_bar">
<div id="tabsJ">
<ul>
<li><a href="default.aspx" title="Home"><span>Home</span></a></li>
<li><a href="buying.aspx" title="Buying"><span>Buying</span></a></li>
<li><a href="selling.aspx" title="Selling"><span>Selling</span></a></li>
<li><a href="relocation.aspx" title="Relocation"><span>Relocation</span></a></li>
<li><a href="searchmls.aspx" title="Search MLS"><span>Search MLS</span></a></li>
<li><a href="localinfo.aspx" title="Local Info"><span>Local Info</span></a></li>
<li><a href="vma.aspx" title="Virtual Market Analysis"><span>Virtual Market Analysis</span></a></li>
<li><a href="calculator.aspx" title="Calculator"><span>Calculator</span></a></li>
<li><a href="contact.aspx" title="Contact Me"><span>Contact Me</span></a></li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
<div class="lefthandmenu">
<div id="dlmenu">
<ul id="menu">
<li>
<dl class="gallery">
<dt><a href="mortgagecal.asp" title="Mortgage Calculator">Mortgage Calculator</a></dt>
</dl>
</li>
<li>
<dl class="gallery">
<dt><a href="loanamorcal.asp" title="Loan Amortization Calculator">Loan Amortization Calculator</a></dt>
</dl>
</li>
<li>
<dl class="gallery">
<dt><a href="loancal.asp" title="Loan Calculator">Loan Calculator</a></dt>
</dl>
</li>
<li>
<dl class="gallery">
<dt><a href="loancal.asp" title="Loan Calculator">Rent vs Buy Calculator</a></dt>
</dl>
</li>
<li>
<dl class="gallery">
<dt>
<a href="mailto:ssss@sssssssss.com">
<b><font color="black">Ssssss Ddddddd<br/>
<i>Broker Associate</i><br/>
<font size="2em">RRRRRR 11 Rrrr ReeeeeRealty<br/>
3212 North 12th St.<br/>
New England, DE 111111<br/>
213-234-1234<br/>
ssss@sssssssss.com</font></b></font></a>
</dt>
</dl>
</li>
</ul>
</div>
</div>
<div class="righthandmenu">
<h4>Calculators</h4>
<p>A mortgage calculator for every need
Whether you're buying a home or refinancing an existing loan, we have a mortgage calculator that can help you make the right decisions. Determine exactly which deal offers the lowest monthly payments, how much home you can afford, and whether it makes sense to rent or buy.</p>
</div>
<div style="clear:both;"></div>
<div class="footer">
heelo</div>
</div>
</body>
</html>
Code:
body {
text-align: center;
background-color: #D5D0B0;
margin-bottom:10px;
color:black;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.page_wrapper {
margin-left: auto;
margin-right: auto;
width:799px;
text-align: left;
background: #FFFFFF url('../img/content_bg.gif') top left repeat-y;
}
.page_header {
height: 198px;
background: #FFFFFF url('../images/banner.jpg') bottom left no-repeat;
clear: both;
}
.menu_bar {
margin:0px;
padding:0px;
clear:both;
}
#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}
#tabsJ ul {
margin:0;
padding:5px 0px 0px 0px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("tabrightJ.gif") no-repeat right top;
padding:5px 9.4px 5px 9.41px;
color:#24618E;
}
#tabsJ a span {float:none;}
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}
.lefthanddiv
{
width:799px;
margin:15px 10px 15px 10px;
}
h2 {
color:#000000;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 125%;
font-weight: bold;
margin: 10px 0 0 0;
padding:15px 0px 0px 0px;
color:red;
}
ul {
list-style-type: square;
}
h5 {
color:#000000;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 100%;
font-weight: bold;
margin: 5px 0 0 0;
padding:5px 0px 0px 0px;
color:red;
}
.paraclass
{
padding: 1px 25px 3px 0px;
}
.container
{
width:879px;
background:#1C86EE;
}
.lefthandmenu
{
float:left;
width:200px;
padding:1px 0px 0px 0px;
}
.righthandmenu
{
float:left;
width:579px;
padding:1px 10px 10px 10px;
}
#menu1 {
width: 187px;
}
#menu1 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu1 li a:link, #menu1 li a:visited {
color: #E4D6CD;
display: block;
background: url(menu1.gif);
padding: 6px 0 0 8px;
}
#menu1 li a:hover {
color: #FFF;
background: url(menu1.gif) 0 -32px;
padding: 6px 0 0 8px;
}
.newul {
list-style: none;
margin: 0;
padding: 0;
}
h4 {
color:#000000;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 125%;
font-weight: bold;
margin: 3px 0 0 0;
padding:3px 0px 0px 0px;
color:red;
}
.sig
{
padding:5px 5px 5px 5px;
font-size:75%;
}
#footer {
width: 879px;
margin: 0 auto;
background: #ffc;
border: 1px solid #000;
}
thank you so much for all your help I am attaching the pictures as they look in both browsers Similar TutorialsMy work wasn't allowing us to have Mozilla on our computers so when I began my website I had to code for IE. Well now that we have clearance for FireFox, I've tested it and it appears that my CSS isn't even there when opening the page in Mozilla. It just looks like straight HTML. I know that due to my work being crazy I'm doing this a bit backwards (should always code for Mozilla and debug in IE), but this is what I have to work with and I need your help. Here is the CSS reference: Code: <link href="D:\Play\PersonalWebsite\WebContent\CSS\Style.css" rel="stylesheet" type="text/css" media="screen" /> Here is the CSS: Code: body {
background-color:#666633;
background-image:url(http://i444.photobucket.com/albums/qq161/JadieGlitch/bg.jpg);
background-repeat: repeat-y;
margin: 0;
padding: 0;
font-family: "Trebuchet MS",Tahoma,Lucida Sans,Arial,Verdana,Helvetica,sans-serif;
}
@media screen {
div#lockedLeftContainer, div#lockedTopContainer {
position: fixed;
}
div#lockedTopContainer{
background-color: #191916;
height: 204px;
width: 1500px;
background: url() no-repeat;
left: 0;
}
a img {
border:none;
}
div#linkList h3 {
display: none;
}
div#lockedLeftContainer, div#lockedLeftContainer a {
left: 0;
top: 270px;
width: 185px;
height: 100%;
font-size: 12px;
padding: 5px;
padding-right: 10px;
font-weight: bold;
color: #FFF;
}
div#lockedLeftContainer a:hover {
color: #191916;
}
div#News {
margin-left: 445px;
padding: 10px;
padding-left: 20px;
padding-bottom: 0;
height: 100%;
}
div#supportingText{
height: 100%;
}
.clr {
clear:both;
}
div#News h3, div#supportingText h3 {
display: block;
background: url(http://i444.photobucket.com/albums/qq161/JadieGlitch/hatching.gif) left top repeat #191916;
margin: 0;
padding: 0;
padding-left: 20px;
color: #FFF;
font-size: 24px;
line-height: 50px;
text-transform: lowercase;
width: 100%;
}
div#News h4, div#supportingText h4 {
display: block;
background: url(http://i444.photobucket.com/albums/qq161/JadieGlitch/hatching.gif) left top repeat #191916;
margin: 0;
padding: 0;
padding-left: 20px;
color: #FFF;
font-size: 24px;
line-height: 50px;
width: 100%;
}
div#News p, div#supportingText p {
font-size: 14px;
color: #191916;
line-height: 1.5em;
padding-left: 10px;
}
div#clear {
clear:both;
}
div#News a, div#supportingText a {
color: #191916;
}
div#News a:hover, div#supportingText a:hover {
color: #FFF;
}
div#News abbr, div#News acronym, div#supportingText abbr, div#supportingText acronym {
border-bottom: 1px dotted #191916;
}
div#footer {
display: block;
height: 20px;
background: url(http://i444.photobucket.com/albums/qq161/JadieGlitch/hatching.gif) left top repeat #191916;
padding: 3px;
font-size: 12px;
line-height: 20px;
text-align: center;
margin-bottom: 10px;
}
div#footer a {
color: #fff;
font-weight: bold;
}
div#footer a:hover {
color: #000;
}
div#linkList {
position: fixed;
left: 210px;
top: 310px;
width: 240px;
font-family: Baskerville,Georgia,Garamond,"Times New Roman",serif;
}
div#linkList ul {
list-style: none;
padding: 0;
margin: 0;
height: 100%;
}
div#linkList ul {
list-style: none;
}
div#linkList ul li {
border-bottom: 1px solid #630;
}
div#linkList ul li a {
display: block;
padding: 5px;
font-weight: bold;
font-size: 12px;
color: #663;
text-transform: uppercase;
text-decoration: none;
height: 100%;
}
div#linkList ul li a:hover {
border: 1px solid #000
}
div#linkList div#lselect ul li, div#lStore ul li {
padding: 5px;
padding-left: 20px;
padding-right: 20px;
height: 100%;
}
div#linkList div#lselect ul li a:hover, div#lStore ul li a:hover {
color: #000;
}
div#linkList div#lselect ul li a.c, div#lStore ul li a.c {
display: inline;
text-transform: none;
font-size: 10px;
color: #191916;
}
div#lStore ul li a.c:hover {
text-decoration: underline;
}
div#linkList div#lselect, div#linkList div#lStore, div#linkList div#lresources {
margin-top: 10px;
}
div#linkList div#lselect h3, div#linkList div#lStore h3, div#linkList div#lresources h3 {
display: block;
height: 35px;
margin: 0;
padding: 0;
}
div#rotate_ad {
display: block;
height: 150px;
margin: 0;
padding: 0;
}
div#linkList div#lselect h3 span, div#linkList div#lStore h3 span, div#linkList div#lresources h3 span {
display: none;
}
div#linkList div#lselect h3 {
background: url(http://i444.photobucket.com/albums/qq161/JadieGlitch/PhotoGallery.gif) center top no-repeat;
}
div#linkList div#lresources h3 {
background: url(http://i444.photobucket.com/albums/qq161/JadieGlitch/Resources.gif) center top no-repeat;
}
div#contactInfo {
position: absolute;
left: 210px;
top: 400px;
}
div#newsimage {
position: relative;
left: 25px;
top: 25px;
}
http://www.em1.nl/martijn/test.html It works perfect in IE, but in mozilla it doesn't, anyone has a solution? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#script {
display: block;
width : 200px;
cursor : pointer;
}
A:HOVER {
color : Yellow;
}
A {
color : White;
font-weight : bold;
font-size : 12px;
font-family : Arial, Helvetica, sans-serif;
text-decoration : none;
}
body {
font-family: arial, helvetica, serif;
}
</style>
<script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
</script>
</head>
<body bgcolor="#000000" link="#FFFFFF" vlink="#00FF00" alink="#FFFF00">
<div style="display: block;" onMouseOver="showhide('script');" onMouseOut="showhide('script');"> <a href="#">Move mouse over this<br></a><font id="script" style="display: none;">
<a href="">link 1 Works perfect in IE</a><br>
<a href="">link 2 BUT mozilla it doesn't :-)</a><br>
<a href="">link 3 anyone knows a solution?</a><br>
<a href="">link 4 ...............Thx</a><br></font></div>
</body>
</html>
Hi, i made this page: http://www.jarra.nl/_TEST/test.htm css file: http://www.jarra.nl/_TEST/mottacss2.css i'd like to have the orange line above "new title" at the same height as the orange line under the gray box. it's like that in IE6 on XP, but it's slightly lower in mozilla on XP. can't seem to fix it ;-) any ideas, thanx a lot !! jarra I have some css problems displaying in Netscape & Mozilla Firebird browsers with a site I've built. The top menu and dropdowns aren't displaying correctly. There are also some spacing and alignment problems in the main body area and right column section. It seems to set up an invalid CSS style, but I'm not sure how to correct this for these browsers. I've made several attempts to no avail. I want to keep it working in IE. I've looked at some css hacks, but can't get it working with my style sheet and correct the Mozilla browser problem. Here is the link to the site: http://www.delfuegocompanies.com Any help is appreciated. Thank you. Regards, -D- Hello, I'm going nuts over a (probably very simple) problem in my CSS layout coding. Everything works perfectly in IE 6.0 but not in mozilla (any?) and FireFox 1.0PR. I believe the same problem is found in Safari on MAC as well... The problem is, I can't get two "content boxes" aligned side by side in my "main content" area. Take a look at this page : The whole layout You'll see that the box "test55?" and "test66?" is not aligned side by side as they should be. Everything else in the layout works out OK. If you look at this page : Stripped layout You'll see the same problem, but I've stripped out all the other code. Even if I expand the length of the "content div" it won't align side by side, so there's not a "space" problem. I'm sure it's a very simple solution, but I can't seem to find out what it is.. Help! PS: everything works in IE 6.0 (on XP) so don't bother look with that browser unless you want to see what it should look like Thanks, Sep Hello friends, I have created this page http://www.geocities.com/axe_42k1/index.html with html and css its working fine with IE but in mozilla firefox, images in center are overlaping on right side images and no round border to themplease help me to solve this problem and i want to insert link to top left hand side image how can i do it with css?. check this out... ...http://www.topfloridavacations.com/tempLayout_copy(1).html... just that page, not any of the links it points to because they are using the same style sheet. Now... that page, looks okay under IE, however if you look at under Mozilla, the main menu with the tabs 'Florida Vacations', 'View All Listings' etc. do not have the border when you do a hover on them, AND the 'Members Area' being the selected choice does not have the bottom border. In IE, however, thats not the case, it just doesn't display it that way, and the only way to make it appear so that I've figured out involves skewing margins, which screws it up even worse for Mozilla. Any ideas? The style is located in that webpage; it's not in a seperate .css file. Thanks for any help if possible. Can someone please help, and explain to me ehy this doesn't work: Code:
<html>
<head>
<style type="text/css">
<!--
body
{ font-family: Arial, Verdana, Helvetica, sans-serif; margin: 0px; background-image: url(images/impact-back.gif); background-repeat: repeat; background-position: top; background-attachment: fixed; }
td
{ font-family: Arial, Verdana, Helvetica, sans-serif; }
th
{ font-family: Arial, Verdana, Helvetica, sans-serif; }
#siteWrapper
{ width: 953px; margin: 0px auto; background-color: #FFFFFF; }
#headingsContainer { width: 953px; margin: 0px; padding-bottom: 0.1px; }
#welcome
{ float: left; width: 494px; height: 65px; background-image: url(images/welcome-back.gif); background-repeat: no-repeat; background-position: top left; background-attachment: fixed; }
#space2
{ float: left; height: 65px; background-color: #FFFFFF; }
#demonstration
{ float: left; width: 265px; height: 65px; background-image: url(images/demonstration-back.gif); background-repeat: repeat; background-position: top left; background-attachment: fixed; }
#news
{ float: right; width: 178px; height: 65px; background-image: url(images/news-back.gif); background-repeat: repeat; background-position: top left; background-attachment: fixed; }
-->
</style>
</head>
<body>
<div id="siteWrapper">
<div id="headingsContainer">
<div id="welcome"></div>
<div id="space2"><img src="images/space.gif" width="8" height="65" /></div>
<div id="demonstration"></div>
<div id="space2"><img src="images/space.gif" width="8" height="65" /></div>
<div id="news"></div>
</div>
</div>
</body>
</html>
Please help with my problem ONLY PROBLEM IS MOZILLA Ok the problem is hard to explain but here it goes: I have news items that are divs, inside that div i have a floating left image, then i have the news content. The problem comes when I view it in Firebird. It seems the next news item starts at the bottom of the floating image. This causes serious problems with the text. I tried this .clear css style: clear: both height: 0 line-height: 0 but it just seemed to help with one (bringing the second one below the bottom of the page). Does anyone know what might be the problem? Here is the link: http://www.cjweed.com/porttest As you can see IE displays everything like a champ, mozilla likes to mash it together. Please help please look at the image below I think, the image I sent will be able to explain what my problem is Code: <script>
function SetState(obj_checkbox)
{ if(obj_checkbox.checked)
{
document.getElementById('NwLink').style.display = "block";
return true;
}
else
{
document.getElementById('NwLink').style.display = "none";
return true;
}
}
</script>
<form name="form">
<table width="600">
<tr>
<td>
News:<br>
<input type="checkbox" onclick="SetState(this)">
</td>
</tr>
<tr id="NwLink" style="display: none;">
<td>
Intro text:<br>
<input type="Text" name="NewsIntroText">
</td>
</tr>
<tr>
<td>
and here is some more text
</td>
</tr>
</table>
</form>
I have done alot of changing around settings, sizing from absolute to relative, margins to widths, and i still cant figure out what is urking my page when loaded from mozilla-firefox and netscape. The page works fine when used with Internet Explorer. Does anyone have a chance to take a look at it here at <a href> www.wolfdogg.soldierlink.com/html using Firefox and IE? style sheet is at <a href> http://www.wolfdogg.soldierlink.com/main-reworked.css or would you prefer i post the code is there actually a website that i can go to that will have a list of the extra styles that firefox and netscape needs that are automatic and uneccesary on internet explorer? Thanks a bunch, WolfDogg Have exhausted my knowledge base and hoping someone ou there can help. Trying to get Box1 to either autostretch to same the length as box2 & 3 or get the container background to show up in Mozilla & Netscape. Code: <head>
<style type="text/css">
<!--
body {
text-align: center;
margin: 0px;
padding: 0px;
background: #333;
}
.central {
margin-right: auto;
margin-left: auto;
position: relative;
width: 780px;
text-align: left;
}
#container {
float: none;
margin: 0 auto;
width: 780px;
text-align: left;
background: #AAA;
}
#top, #navbar, #middle, #footerblock {
float: left;
width: 780px;
}
#top {
background-color: #DDD;
height: 75px;
}
#navbar {
background-color: #EEE;
height: 25px;
}
#footerblock {
background-color: #666;
height: 25px;
}
#box1 {
background-color: #AAA;
float: left;
width: 260px;
height: 200px;
}
#box2 {
background-color: #BBB;
float: left;
width: 260px;
height: 400px;
}
#box3 {
background-color: #CCC;
float: left;
width: 260px;
height: 400px;
}
-->
</style>
</head>
<body>
<div class="central">
<div id="container">
<div id="top">top</div>
<div id="navbar">navbar</div>
<div id="middle">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</div>
<div id="footerblock">footer</div>
</div>
</div>
</body></html>
I've seen a fix for this online before, but I can't seem to find it now. Basically I've got the following layer declartion: HTML Code _NOT_ php PHP Code: <div style=" color: black; font-size: 10pt; font-family: arial; text-align: center; visibility: hidden; display: block; position: absolute; z-index: 3; top: 115px" id="default"> When I make this layer visible it shows up in the exact position I want it to in most browsers, but in Mozilla it is 10 pixels to low. How can I get this layer to show up on Mozilla in the same pos as IE? Should I use javascript to adjust that "top" to 125 if its Mozilla? Or is there a CSS way to resolve this. i have divs on a page, and the ones appearing on the left don't use any style (style=""), where as on the ones appearing on the right use (style="float: right; clear: right;") in IE 6 and 7, it creates the needed visuals found in the first attachted file (ie 7.gif).. as is seen, it clears the content so that the end of the divs are always in line, so that the next divs can begin properly in line in mozilla firefox (mozzila firefox.gif), it does not obey this idea, and simple starts the next divs after the end of the above ones.. you can imagine how problematic this is when some divs on the right contain ALOT of words, that should be inline with the one of the left, etc any thoughts or anything that could help would be apprciated... regards Below is a simple test page that fails to load properly on the Mozilla browser. It appears to work properly in IE. Any suggestions to getting the span width to set properly, based upon the content of the span would be a great help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Span test</title> <style TYPE="text/css"> .submenu { background-color: #FFFFFF; color: #D4BA6B; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; border-bottom: 0px solid #000000; position: absolute; margin: 0px; padding: 0px; min-width: 100px; visibility: visible; z-index: 1; } .submenuItem { background-color: #FFFFFF; color: #000000; border-left: 2px solid #ff0000; border-right: 2px solid #ff0000; border-bottom: 2px solid #ff0000; border-top: 2px solid #ff0000; font-family: "arial narrow", arial, verdana, sans-serif; font-weight: normal; font-size: 12pt; padding-top: 2px; padding-bottom: 2px; padding-right: 5px; padding-left: 5px; position: absolute; z-index: 1; cursor: pointer; cursor: hand; } </style> <SCRIPT LANGUAGE="javascript"> function getWidth() { oSpan = document.getElementById("testSpan"); iWidth1 = oSpan.offsetWidth; alert ("Width1 = " + iWidth1); } </SCRIPT> </head> <body onload="getWidth()"> <div class="submenu"> <span class="submenuItem" id="testSpan">This is the item that I am testing today.</span> </div> </body> </html> hi my page involves having a form element inside of a div. the div is floated left. relevant (seemingly) css from my stylesheet & html code (all simplified for readability) form { margin: 0px; padding: 0px; } .mydiv { float: left; } html looks vaguely like: <div class="mydiv"><form name="blah" action="blahblah"> .... all form controls </form></div> PROBLEM!!!! in mozilla, none of the form elements display. in ie, everything displays as expected. PLEASE HELP ME BEFORE I GO INSANE AND START KILLING INNOCENT PEOPLE. thanks in advance. d Hi, I'm still new to CSS and have been learning for the past couple of days now. I'm having trouble getting a two-column layout working correctly. Using the faux method, I have a background set so the right-column has a different background color. This works fine. But I'm having trouble placing the elements inside of the container to work correctly. When the left-column has more content than the right, instead of the container (and thus the background) moving to fit it, the column just extends down by itself. However if the right column has more content than the left, it works correctly. I think it might be because of the float: left, but I'm still new and not exactly sure what the problem is. The URL to view this is http://serve5.net/extend/ - the CSS is right in the source for you to look at. Could someone point me in the right direction as far as getting the left-column to extend down correctly? It seems to work fine in Internet Explorer - but I use Mozilla Firefox and it's having this issue. However, in Mozilla, the left-column's background extends to the border fine, but in IE, it overlaps it. What can I do to fix this also? Thanks. Hi there, I'm back again I'm afriad with another minor problem with my new site design. Have a look at the test version of my website he http://www.eveythingfree.buildtolearn.net/classifieds/ If you are looking at it in Internet Explorer it should look fine, but if you try it in Mozilla Firefox or Netscape it looks badly messed up. The problem is with the 2 boxes near the top of the page, the "latest forum posts" one and the "search box". The whole page (from bellow the navbar) is laid out by the php script that generates most of the content of the site. Thus I am limited in what I can adjust but I can use .css to layout these two boxes. Here is the css that controls the forum and search boxes: Code:
.forums {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
border: 1px solid #666666;
padding: 5px 10px 10px;
background-color: #F9F9F9;
position: relative;
width: 453px;
height: 100px;
left: 10px;
top: 10px;
vertical-align: top;
margin-bottom: 10px;
float: left;
}
.searchbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
border: 1px solid #666666;
background-color: #F9F9F9;
width: 230px;
height: 100px;
left: 20px;
vertical-align: top;
margin-bottom: 10px;
padding-top: 15px;
top: 10px;
position: relative;
}
.listings {
position: relative;
top: 10px;
}
Now I'm pretty sure that the problem lies with the "float" property in .forums. I seem to recall Mozilla and Netscape don't recognise this in the same way IE does. Is there a way of making the site look the same in other browsers as it does in IE? Without the "float" property I have failed to get it to look right, but there must be some way around this problem. I'd really appreciate any help, as this one thing has been holding me back for ages! Thanks, Robert I have a small problem with the login bar on my homepage. In IE it decides to pad extra space on the bottom , however in Firefox all is displayed ok. Please visit www.wecook.co.uk to see the problem. I think the problem is this bit of css Code:
#login
{
width: 736px;
background-color: #e4e2df;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
padding-top: 1px;
padding-bottom: 1px;
text-align: right;
}
label:after
{
content: ": ";
}
label
{
color: black;
font-weight: bold;
padding: 1px;
text-transform: uppercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
}
input
{
display: block;
width: 100px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
padding: 4px;
border: solid black;
border-width: 1px 2px 2px 1px;
}
.buttonLogin
{
width: 60px;
color: black;
text-transform: uppercase;
border: 1px solid #5C5C5C;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
text-align:center;
}
Offending bit of HTML Code:
<!-- If no cookies display login bar -->
<!-- start login -->
<div id = "login">
<form action="Login.do" method="post">
<table width="736" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="445" align="right"> </td>
<td width="112" align="center">
<input name="uname" type="text" id="uname" value="Username" size = "10" /> <br />
</td>
<td width="112" align = "center">
<input name="pword" type="password" id="pword" value="Password" size = "10" /> <br />
</td>
<td width="67" align = "center" valign="bottom">
<input type="submit" name="Login" value="Login" class="buttonLogin" /> </td>
</tr>
</table>
</form>
<!-- end login -->
</div>
Any help is appreciated. Thanks. I think its to do with the login button - but dont know how to fix it. I'm having some issues with website I'm putting together. Don't flame me for the code, it started as exported code from Photoshop. I need to get it up quick, after that, I'll convert it over to full CSS. http://www.foltzconstruction.com Try navigating to one of the subpages. Everything displays perfect in FF, but wrong in IE. Anyone got any clues as to why? I've attached my CSS file to make your life a little easier. Thanks, guys. |
|||||||