|
CSS - Image Problem In Mozilla
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?. Similar TutorialsOk 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 I've got the following code written for a web site that I'm supposed to look at moving toward CSS. I'm just begining and am already noticing the discrepancies between IE and Mozilla (Firefox). Mozilla seems to be separating images larger than it should. I know this is(was) a problem with IE, but didn't expect to see it in Mozilla. Any suggestions? I can supply code and a reference page if needed. Thanks for any help. Code: <style>
<!--
BODY{
cursor:url("Hand.USA.cur");
}
a, a:hover {
cursor:url("Hand.USA.cur");
}
-->
</style>
I'm using the above code to display an icon that is replacing the default arrow. This only seems to work in Internet Explorer 6+. Would anyone know another way to display an image or icon either through a url (http://www.blah.com/img.jpg) or .cur or .ani that will work in Mozilla, and Netscape ? Thanks, Shawn 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'm using html:link with a background image. This works fine on IE and Firefox, but the link won't show in Mozilla. Could changes to the css fix this? Does anyone know how to solve this? Regards, Nina 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 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 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 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 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 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 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 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>
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 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 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. 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 |
|||||||