|
CSS - Ie/mozilla Compatibility Problem
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. Similar TutorialsJust testing my new design on IE6 and it doesnt quite work. The table at the top of each category where it says "RW::Scripts" and "New Category" should fill the top of the frame 100% but it doesnt. You can see it in action here http://www.rwscripts.com/testsite/index.php It works fine in Firefox just not IE Heres the stylesheet that I am using Code: body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.tableborder{
border: 1px solid #000000;
background-color: #FFF;
padding: 0px;
margin: 10px 20px 0px;
}
.debugborder{
border: 1px dashed #000000;
background-color: #eeeeee;
padding: 5px;
margin: 10px 20px 10px;
}
.tablefooter {
background: #A0BED3;
padding: 2px;
height: 29px;
border: 1px solid #000000;
}
.tabletitle {
height: 29px;
border: 1px solid #000000;
}
.tableheader {
font-weight: bold;
color: #5285A2;
height: 23px;
border: 1px solid #000000;
background: #A0BED3;
}
.mainrow {
background: #EAEAEA;
}
.subfooter {
font-weight: bold;
background: #92ACBE;
height: 29px;
}
.statHead {
font-size: 12px;
font-weight: bold;
background: #004080 center;
height: 20px;
text-align: left;
vertical-align: middle;
padding: 4px;
border-top: 0px solid #999999;
border-right: 0px solid #999999;
border-bottom: 1px dashed #999999;
border-left: 0px solid #999
}
.statRow {
font: 10px Verdana, Arial, Helvetica, sans-serif;
background: #006699;
border-bottom: 1px dashed #999999;
padding: 2px;
}
.ucpmain {
font: 10px Verdana, Arial, Helvetica, sans-serif;
border: 1px solid #cccccc;
padding: 0px;
}
.ucpon {
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background: #006699;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding: 2px;
height: 25px;
}
.ucpoff {
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background: #004080;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding: 2px;
height: 25px;
}
.copyright{
font-family: Verdana, Tahoma, Arial, Sans-Serif;
font-size: 11px;
line-height: 12px;
text-align: center;
}
.purple { color:purple;font-weight:bold }
.red { color:red;font-weight:bold }
.green { color:green;font-weight:bold }
.blue { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold }
Ok.. I have a problem with a div on my index page.. Look at www.zepcom.dk .... in firefox, there are no errors... however in IE, there's an error with the newsletter div... It's some kind of CSS error.. but I can't seem to find a solution.... Can someone help me? Alright. I've got a simple layout - so far just a header in an HTML document with a linked to CSS document. The two interact with one another fine, that's not my problem. My problem lies between Internet Explorer and.. every other browser. As usual. Anyways, here's my header in Internet explorer: and in FireFox: The IE document is more or less what I need the FF to look like. I made some changes to the initially correct documents in FF to work with IE and screwed FF up, and I really have no idea how to sustain both. Now the HTML document: html Code: Original - html Code <head> <style type="text/css"> @import url(style/style.css); </style> </head> <body> <div align="center"> <div id="header"> <form> <input type="text" value="user" id="user"> <input type="password" value="pass" id="user"> <input type="submit" value="Submit" id="submit"> </form> </div> <div id="nav"> <ul> <li class = "active"><a href="index.php">home</a></li> <li><a href="/services">services</a></li> <li><a href="/pricing">pricing</a></li> <li><a href="/jobs">jobs</a></li> <li><a href="/contact">contact us</a></li> </ul> </div> </div> </body> <head> <style type="text/css"> @import url(style/style.css); </style> </head> <body> <div align="center"> <div id="header"> <form> <input type="text" value="user" id="user"> <input type="password" value="pass" id="user"> <input type="submit" value="Submit" id="submit"> </form> </div> <div id="nav"> <ul> <li class = "active"><a href="index.php">home</a></li> <li><a href="/services">services</a></li> <li><a href="/pricing">pricing</a></li> <li><a href="/jobs">jobs</a></li> <li><a href="/contact">contact us</a></li> </ul> </div> </div> </body> annnd the CSS: css Code: Original - css Code /* CSS Document */ body{ font-family:Verdana, sans-serif; text-align:center; margin:0px; } #header{ width:770px; height:69px; background: url(head.png) no-repeat top center; text-align:right; vertical-align:top; padding: 14px 40px 0 0; border-left:url(borderleft.gif); } img { vertical-align: bottom; display: block; } input{ height:18px; padding: 0px; width:70px; } #submit{ font-size:10px; font-weight:bold; } #nav { width:770px; background-color:#d2e3a6; height:24px; padding:0px; font-size:11px; } #nav ul { float: left; width: 770px; background-color:#dse3a6; margin: 0; padding: 0 0 0px 20px; list-style: none; } #nav ul li { float: left; margin: 0; padding: 0; } #nav ul li a { display: block; float: left; margin: 0 0 0 0; padding: 6px 10px 9px 10px; font-weight: bold; text-decoration: none; color: #555; } #nav ul li a:hover { background: #d9d9d9; } #nav ul li.active a, #nav ul li.active a:hover { margin-top: 0; padding-bottom: 10px; background: url(hover.gif) repeat-x bottom right; }
I'd be very appreciative if anybody could point out what's causing this problem. If you need any further information I'd be glad to provide it - note that the header image is blanked out on purpose. Thanks! Hi there, I just read some articles here on devshed and fell in love with the div/css technique Now I got the following problem (see the attached Screenshots) div1 is Firefox 1.0 div2 is IE 6.x The css code looks like that: PHP Code: body { margin: 10px; padding: 0px; } #leftcol { background: #FFFF33; margin-left: 80px; float: left; width: 30%; height: 250px; padding: 15px; } #rightcol { background: #33CC33; margin-right: 80px; float: right; width: 30%; height: 250px; padding: 15px; } The HTML Part: PHP Code: <div id="leftcol"> <b>Neuer Kunde</b><br> Falls Sie noch nicht in unserem System registriert sind klicken Sie bitte auf Neuer Kunde<br> <form action="country.php" Method="POST"> <input type="Submit" value="Neuer Kunde"> <input type="hidden" value="'.$baq.'" name="back"> <input type="hidden" value="'.$get_string.'" name="get_string"> <input type="hidden" value="'.$text.'" name="posttxt"></form></div> <div id="rightcol"> <b>Bestehender Kunde</b><br> Bitte loggen Sie sich hier mit Ihrer E-Mail Adresse und Ihrem Passwort ein<br> <form action="kdinfo.php" Method="POST"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%">E-Mail:</td> <td><input type="text" name="Rmail"></td> </tr> <tr> <td width="15%">Passwort:</td> <td><input type="password" name="Rpass"></td> </tr> </table> <a href=recover.php>Passwort vergessen?</a><br><br> <input type="Submit" value="Einloggen"></form> </div> Now how can I manage it to look simliar on IE and Firefox? I'd appreciate any help! Thanks for your time. Hello there, My CSS File is being a little problematic with a web page I'm making. Basically I'm using the CSS File to create the Div tags and both Internet Explorer and Firefox seem to be fine in positioning the div tags but for some reason firefox wants to ignore all border commands, so none of my div tags have borders in firefox where as Internet Explorer and other browsers seem to be fine with the code. div.three{ width:700px; height:200px; top:600px; left:50%; margin-left:-350px; position:absolute; border:#00CCCC outset thin; padding-left:5px; } That's all the CSS. If anyone has a solution as to why firefox doesn't like borders anymore that would be great. All i've found so far is that inset/ outset problem, nothing on dissapearing borders. 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 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 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 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 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 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?. 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 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>
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'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 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 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> |
|||||||