|
CSS - Css Problem In Mozilla/firefox
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 Similar Tutorialsi 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 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. I'm designing a site and have an absolute div with a z-index of -1. This div has a background image. On top of this div I have a normal layout table with my content, in effect I wanted a background image that didn't tile, so I threw it in a div. When i view it in IE6 everything looks nice, but when I view it in firefox, the image doesn't show up, the dive borders dont show up and any text I put in the div doesn't show up. Any thoughts or workarounds why the image isn't showing. Thanks chuck_samsonite _______________________________________________ Lloyd: Oh yeah! It's right here, Samsonite! I was way off! I knew it started with an S though! I've been pulling out my hair trying to figure out what it is i'm doing wrong here. I've been messing with this code and trying different things, but can't seem to figure out what the problem is. One of my divs is not sized properly. Can someone take a quick look and see what it could be? I'd realyl appreciate it. Thanks! http://ritchie.acomp.usf.edu/~lamba/my2.html This is just driving me up a wall here. It's been like this for a while, and I never cared b/c I don't use IE. My viewers, however, do, and it's an eyesore. Link to crappy page This is a sidebar I have on all the pages. It grabs the latest 10 threads from the forum. Gets the latest 10 additions to the database, and finally gets the top 10 viewed items. As you'll see (specifically in the top entry of the top list (latest news) it messes up the vertical alignment for some reason. AFAIK, my CSS is fine. Again, this problem only exists in IE. Thanks Hello all, I recently redesigned my site from table layout to css layout. when viewed in ie it looks good however when viewed in anything else the layout falls apart. the link is: Benefit Solutions, Inc Do i need to copy the css to the site? I'm not too sure how to go about getting the help i need. any opinions would be appreciated. thanks in advance I'm not sure what is causing the extra spaces to the top and bottom area of the images... Code:
<div style="margin:0px;padding:0px;background-color: #FF0000;">
<img src="images/mod_bt2.gif"><br>
<img src="images/mod_bt1.gif"><br>
<img src="images/mod_bt7.gif"><br>
<img src="images/mod_bt6.gif">
</div>
hi all... i have a huge style sheet, and i need to convert it to display properly in IE, how do i go about doing that, not recoding all the styles, i am also thinking about the check to se which style sheet to use, i think that i saw a method to do it under the <link> tag or something ?... help a fellow out there are over 800 lines of code in the style sheet.... frank/ I'm having trouble with a layout issue. Position is fine in IE, but in Firefox and Mozilla there's a 55 pixel gap on this drop down list and an even larger gap when the list is expanded. Here's my css for the navbar: /* Navbar */ #nav { width: 158px; margin-left: 0; } #nav ul { font-family: "Trebuchet MS", serif; font-size: 11px; margin-left: 0px; list-style-type: none; } #nav ul li ul { margin-left: 12px; } Any suggestions or help would be appreciated. Greetings... I've looked all around for a solution, and can't find one. Any help that anyone could provide would so greatly appreciated. My site http://www.baltimoregamers.com displays the div boxes incorectly in Firefox. I am using quite an unusual layout with one big picture as a plate for the entire site... I then lay div boxes/layers ontop of the plate to position text exactly where I want it to go. It works flawlessly in IE, but displays a too far down and to the right in FF/Mozilla. I am new to using CSS and I'm sure that something is off somewhere in the code. Thank in advance for any help. Feel free to e-mail me he dekay@baltimoregamers.com Can anyone tell me whether they have experienced height and overflow problems with FireFox and Mozilla browsers? Check this out: Test Page. It looks fine in IE, but not the other two. I've been working on this half the day with no solution. Can anyone help? If the problem can be solved without the use of javascript, that would be preferred. Thanks, Darin Just testing this in different browsers and noticed that the image is shown in the background but does not go to the background-position that is specified. This works for IE. Does anyone know if there is a different way of doing this? <STYLE type="text/css"> BODY { background-image:url(awesome.gif); background-repeat:no-repeat; background-position:50 220; background-attachment:fixed } </STYLE> Thank you for an insight into this little glitch. 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>
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 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. 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- 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 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 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?. |
|||||||