|
CSS - Css Works In Ie But Mozilla Is Screwed
Ok i have a piece of code for the menu that works the way i want in IE but in Mozilla totaly screwed. Any help to fix this?
Try this link in IE then in FireFox HTML Code: <div id="navcontainer"> <ul id="navlist"> <li><a href="#">Home</a></li> <li><a href="#">Community</a></li> <li><a href="#">Members</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">Servers</a></li> <li><a href="#">IRC</a></li> <li><a href="#">About</a></li> <li><a href="#">Links</a></li> </ul> </div> CSS Code:
#navcontainer
{
heigt:100px;
}
#navlist ul
{
margin-left: 0;
padding-left: 0;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a {
padding: 3px 10px;
margin: -3px 6px;
}
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
text-align:center;
background: #366 url(lbg.gif);
width: 100px;
height: 100px;
}
#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
Similar TutorialsMy desired layout is working the way I want it to in IE, but not in any other browser. I've been messing with the layout and the CSS for a while now, and I'm officially at a loss. I set the height of the div that the content is in, but when the content were to overflow, I want the background image to repeat. If you enlarge the text a couple of times using Apple + or Alt +, you will see what I mean. Example HTML: <body> <div id="bodycontent"> <div id="content">Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br /></div> <div id="signup">Sign up comes here.</div> <div id="footer">Footer links come here.</div> </div> <div id="coverart"><img src="images/artwork0105.jpg" alt="Strut Magazine Cover Art" border="0" /></div> <div id="topmenu">Menu comes here.</div> </body> CSS: body { font-family: Arial, Helvetica, sans-serif; font-size: 10px; background-color: #FFFFFF; margin: 0px; } #bodycontent { width: 750px; position: absolute; top: 28px; background-image: url(images/bg0105.jpg); background-repeat: repeat; height: auto; } #content { width: 276px; margin-left: 474px; height: 704px; } #topmenu { height: 27px; width: 749px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000; border-right-width: 1px; border-right-style: solid; border-right-color: #000000; background-color: #FFFFFF; vertical-align: top; position: absolute; left: 0px; top: 0px; } #signup { color: #FFFFFF; background-color: #000000; text-align: center; width: 750px; height: auto; } #footer { text-align: center; width: 750px; background-color: #FFFFFF; height: auto; } #coverart { height: 704px; width: 474px; position: absolute; top: 28px; } Thanks! Hi, I am having a strange issue with my new site code . I am experimenting with a new look and decided to go with all css, no tables look. I have a div where the enteries go. I entered some random text to see how it looks. To my surprise in Mozilla 1.7.10 the text overflows from the entry div into the other one while it works fine in Internet Explorer ( the post box expands automatically to fit all the text). Second the in the commentsarea div, why is the "comments(1) floating in the middle of the entry box instead of the bottm right ? here is the code in question Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Kashif Khan" />
<style type = "text/css" media="screen">
body
{
background-color:#A2C257;
color: #333;
padding:0;
margin:0;
font: 90% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}
#page
{
text-align: left;
margin: 20px auto;
padding: 0px;
width: 800px;
background-color:#A2C257;
}
#header
{
height:105px;
margin-bottom: -1px;
background: url("url13.jpg") no-repeat top center;
}
.entry
{
border: 1px solid #FF4500;
background-color:white;
height:200px;
margin:15px 0px;
padding: 15px 20px 20px 20px;
}
#menuarea
{
padding:0px;
margin:0px;
font:90% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:center;
}
#menuarea #navbar
{
text-align:center;
padding-bottom:5px;
padding-top:5px;
padding-left:0px;
margin-top:0px;
margin-left:0px;
background-color:#white;
color:white;
line-height: 18px;
margin: auto;
width:100%;
}
#navbar
{
font:80% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:right;
margin: 0px 0px;
}
#navbar a
{
color:white;
}
#navbar li
{
display:inline;
padding: 5px 0px 5px 0px;
}
#navbar li a
{
padding: 5px 10px 5px 10px;
color: white;
text-decoration:none;
border-right: 1px solid #fff;
}
.center
{
text-align:center;
}
p img
{
padding: 0;
max-width: 100%;
}
a
{
text-decoration:none;
}
a:hover
{
text-decoration:underline;
}
a img
{
border:none;
}
.commentsarea
{
font:80% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:right;
margin:0px 0px ;
}
</style>
</head>
<body>
<div id = "page">
<div id = "header">
</div>
<div id="menuarea">
<ul id="navbar">
<li><a href="">Root</a></li>
<li><a href="archive.php">Archive</a></li>
<li><a href="search.php">Search</a></li>
<li><a href="mailme.php">Email Me</a></li>
<li><a href="http://feeds.feedburner.com/kashiflocalhost/root"><img src="http://kashif.f2o.org/xml.gif" align="middle" border="0"/></a></li>
<li><a href="http://my.msn.com/addtomymsn.armx?id=rss&ut=http://feeds.feedburner.com/kashiflocalhost/root&tt=CENTRALDIRECTORY&ru=http://rss.msn.com'"><img src="http://sc.msn.com/c/rss/rss_mymsn.gif" alt="" style="border:0"/></a></li>
<li><a href="http://www.bloglines.com/sub/http://feeds.feedburner.com/kashiflocalhost/root"><img src="http://www.bloglines.com/images/sub_modern6.gif" border="0" alt="Subscribe with Bloglines" /></a></li>
<li ><a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/kashiflocalhost/root"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif" width="91" height="17" border="0" align="middle" alt="Add to My Yahoo!"></a></li>
</ul>
</div>
<div class = "entry">
Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go. 2
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.3
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.4
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.5
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.6
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.7
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
</div>
</body>
</html>
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 Ie is driving me nuts, well I'm coding this web page and it looks perfect so far in firefox, but it looks messed up in IE http://drowninginmytears.org/store/blah.html thats the link.. i want it to look how it is in firefox in IE, but I'm not sure how.. this is my css: Code: body
{
margin: 0px auto;
background-color: #BFD1E1;
text-align: center;
padding: 0px;
background-position: top;
}
#wrap
{
position: relative;
margin: 0 auto;
text-align: left;
width: 679px;
}
#hearts
{
background-image: url(hearts.jpg);
height: 44px;
width: 43px;
position: absolute;
margin-left: 490px;
}
#girl
{
background-image: url(girl.jpg);
margin-top: 190px;
height: 358px;
width: 142px;
margin-left: 10px;
}
h4 {
font-family: Arial, verdana, tahoma;
text-transform: uppercase;
font-size: 1.0em;
text-align: right;
font-weight: bold;
color: #5886B2;
letter-spacing: 0px;
padding: 10px 20px 0px 0px;
margin: 0;
}
h5 {
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.7em;
text-align: right;
line-height: 5px;
font-weight: bold;
color: #C3D4E3;
letter-spacing: 3px;
padding-right: 17px;
margin: 0;
}
#navigation
{
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.54em;
text-align: left;
font-weight: bold;
color: #769DBF;
letter-spacing: 1px;
margin-top: 25px;
margin-left: 20px;
position: absolute;
}
#toptitle
{
background-position:top;
height: auto;
width: 768px;
background-image: url(bg.jpg);
padding: 0px;
margin: 0px;
}
#blueline
{
height: 6px;
width: 752px;
background-color: #D8E8F8;
margin-top: 8px;
margin-left: 8px;
margin-right: 0px;
position: absolute;
}
#headerimage
{
height: 173px;
width: 752px;
background-image: url(main.jpg);
margin-top: 15px;
margin-left: 8px;
position: absolute;
}
#main {
margin-top: 100px;
width: 768px;
margin: 20px 0;
margin-left:40px;
display: inline;
}
#header
{
background-image: url(top.jpg);
vertical-align: bottom;
height: 10px;
width: 768px;
margin-top: 20px;
padding: 0px;
}
#bottom
{
background-image: url(bottom.jpg);
vertical-align: bottom;
height: 17px;
width: 768px;
margin-top: 0px;
padding: 0px;
}
p
{
text-align: justify;
color: #555;
margin-top: 0px;
margin-bottom: 9px;
}
.caps
{
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
ol
{
margin: 0;
padding: 0;
}
ul, li
{
color: #666;
list-style-type: none;
border: 0;
margin: 0;
padding: 0;
}
a:link, a:visited
{
color: #FA65CD;
text-decoration: none;
}
a:hover
{
color: #FD92E0;
}
a:active
{
color: #FB7FD7;
}
#container
{
position: relative;
margin: 0 auto;
text-align: left;
background: url(bgfront.gif) repeat-y;
width: 679px;
}
#content
{
padding: 28px 20px 0 20px;
min-height: 200px;
}
can anyone help? thanks! Okay first of all I'd like to thank you for taking the time to look over this. The site is at http://projects.bluefusionx.com/scoped/profile/photos/manage/My%20Photos login using demo demo. The positioning is messed up and I can't figure out why. These are the style rules I have set for that section: Code: #image_browsem {
margin-top: 20px;
width: 809px;
}
#image_browsem_l {
float: left;
width: 52px;
}
#image_browsem_m {
float: left;
width: 705px;
}
#image_browsem_r {
float: right;
width: 30px;
margin-left: 22px;
margin-right: 3px;
}
#edit_caption {
clear: both;
}
.mp_caption {
position: relative;
left: 90px;
margin-top: 40px;
border: 1px solid #9A9A9A;
width: 525px;
height: 125px;
padding-bottom: 0px;
padding-right: 0px;
margin-left: 35px;
margin-bottom: 77px;
}
.mp_caption_left {
float: left;
width: 120px;
height: 182px;
padding: 10px 10px 10px 10px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.mp_caption_right {
float: right;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 0px;
width: 380px;
height: 115px;
background-color: #EFEEEE;
}
.mp_caption_right input {
margin-right: 5px;
margin-left: 18px;
}
.mp_caption_right form {
position: relative;
top: 62px;
}
.mpcaption_text {
margin-top: 8px;
width: 318px;
}
.mpcaption_input {
margin-top: 8px;
}
#move_select {
margin-left: 20px;
}
#mpcaption_delete {
margin-left: 127px;
}
.mp_label {
font-weight: bold;
position: relative;
top: 15px;
}
#mp_label1 {
font-weight: bold;;
}
#mp_label2 {
font-weight: bold;
position: relative;
top: 15px;
}
#mp_label3 {
font-weight: bold;
position: relative;
top: 30px;
}
.mp_caption form {
float: left;
border: 1px solid black;
}
.mp_caption_right form {
width: 375px;
}
Any help is appreciated. Hello, My site is on Wordpress and I have changed some CSS. Now my site gets screwed up when I change something in the sidebar. For example if I add something bigger than sidebar width the text on the right drops all the way down in IE. However in firefox everything seem to be fine. But still in IE when I minimize the window the text jumps down. Also when I checked my site on doomaintools.com it showed a small picture of my site but the page is screwed up. I think it is CSS problem. I want to make the sidebar and right side to a particular width so it doesn't change. How can it be done? site is sushicup.com If you are good with css please help me! I'm so lost. Thank you. rush4rk Hello. I can't figure out why Mozilla Firefox won't interpret my CSS correctly. In IE my site works just fine but in Firefox it doesn't work at all. The only part of the css file mozilla is picking up is the body font. Any ideas? Im new to CSS and have a problem. IE displays my webpages without problem but when testing in Mozilla only a small number of CSS borders are visible. Here's an example. This works OK .right { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: solid; border-bottom-style: solid; border-left-style: none; border-top-color: #666666; border-right-color: #666666; border-bottom-color: #666666; border-left-color: #666666; } But this one does not display? .3pxspacernobackborder3 { padding: 8px; font-family: Verdana, Arial, Helvetica, sans-serif, "Book Antiqua"; font-size: 12px; color: #000066; border-top: 1px solid #666666; border-right: 1px solid #666666; border-bottom: 1px none #666666; border-left: 1px none #666666; } This is probably somethign simple but be gentle please guys. I am trying to display a banner (image) at the top of my page with a menu under it. In IE the image aligns to the top of the menu, but in Mozilla the menu starts 15 pixels below the image. I've tried setting margin and padding to 0 for all div tags but that does not help. If I set margin=-15px for my #hnav it aligns in Mozilla, but then the menu is pushed up 15 pixels in IE. I've tried an old IE hack from eric myers, but both IE and Mozilla read the hack code and it did not help. Code:
<html>
<head>
<style type="text/css">
body {margin:0; padding:0;}
html {margin:0; padding:0; background-color:#646874;
font-size:11pt; font-family:Verdana, Arial, Helvetica, sans-serif;}
img {display: block;border:none; margin:0;padding:0;}
a:link, a:visited { color: #00F; text-decoration: none; }
#pageContent {margin-left:24px;margin-top:12px;padding-bottom:45px; padding-right:7px; }
.contentImg {width:707px;padding-left: 209px;}
.padRight { padding-right: 15px; }
#banner {
width:820px;height:149px;
background-image:url(images/820x150.gif);
background-repeat:no-repeat;
}
#hnav {width:820px;height:42px;background-image:url(images/navbar.gif);background-repeat:repeat-x;
margin-top: 0px;}
#hnav ul {list-style:none;padding-left:20px;}
#hnav ul li {float:left;font-size:11px;padding-right:15px;background-image:url(images/divider.gif);
background-position:right;background-repeat:no-repeat;height:30px;}
#hnav ul li a {padding-right:15px;position:relative;top:9px;text-decoration:none;color:#000;}
#hnav ul li a:hover {color:#777777;}
#hnav .curNavItem {padding-right:15px;position:relative;top:9px;text-decoration:none;color:#000;
font-weight:bold;}
</style>
</head>
<body>
<div id="centerPage">
<div id="mastHead">
<div id="banner"></div>
<div id="hnav">
<ul>
<li><span class="curNavItem">Home</span></li>
<li><a href="gold.html">Gold</a></li>
<li><a href="silver.html">Silver</a></li>
<li><a href="ssteel.html">Stainless Steel</a></li>
<li><a href="glass.html">Glass</a></li>
<li><a href="gemstones.html">Gemstones</a></li>
<li><a href="custom.html">Custom</a></li>
<li><a href="plating.html">Plating</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
HELP! this is the deal. My CSS/html looks great in IE.....BUT, when i open it in Mozilla, its like Mozilla isn't even registering the external css...only the html. Any ideas on how to make it work in both ie and mozilla?!? Code: <style>
a.ClassA{
background-color:#000000;
color:#ffffff;
width:200px;
height:50px;
}
a.ClassA:hover{
background-color:Red;
}
</style>
Code: <a href=# class=ClassA>Sample</a> IE http://img156.echo.cx/img156/604/ie9ay.png Mozilla http://img156.echo.cx/img156/7571/moz6ed.png The result I want is the same with IE why is it different in Mozilla ? is there away for me to make css work in mozila? I have this for IE but when i view the site in mozilla/netscape then the tables and etc are all out of place Code:
.10w {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-weight: normal;
}
.10wB {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
}
.10b {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
does anyone knows how to make it work? I am trying a technique at this site, http://www.anncompton.com/test. The format works in IE but not Mozilla. It seems to be the div's with a repeat-y that are failing. Below is a subset of the code - somewhere in this is the problem. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" media="screen" href="test.css" /> </head> <body> <div id="page"> <div id="pagea"> <div id="pageb"> <div id="pagec"> <div id="header"><img src="images/Banner2.gif" alt="Ann Compton" name="logo" id="logo" /></div> <div id="sidebar"> <h5>Cell: 910-699-6919<br /> Res: 910-699-4441 </h5> <a href="mailto:ann@mindspring.com">ann@mindspring.com</a> </div> </div> </div> </div> </div> </body> </html> <!--body { background:#e5f6f4 url(images/huntbkg.gif); margin:10px 0; padding:0px 5px 15px 10px; font:small/1.6em Verdana, Arial, Helvetica, sans-serif; text-align:center; color:#333; } #page { background:#B8BFD8 url(images/pg_topright.gif) no-repeat right top; margin:0 auto; padding-top:0px; width:995px; text-align:left; } #pagea { background:url(images/pg_right.gif) repeat-y right top; width:995px; } #pageb { background:url(images/pg_bot.gif) no-repeat right bottom; padding:0 0px 20px 0px; width:995px; } #pagec { background: url(images/grnbar.gif) repeat-y top left; width:990px; } --> Hello -- The CSS file is being ignored by Mozilla Foxfire (IE recognizes it). When viewed locally in Foxfire, it's OK, but not when uploaded. <!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>Karen Homepage</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="karen.css" rel="stylesheet" type="text/css" /> </head> Any clues/help would be greatly appreciated. Thanks -- JillC 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! My 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;
}
Description of example: A div with an h5 as box title, and another div containing some text. The h5 text is one long string to force the outer div to expand. http://files.contradix.com/css1.html On IE: - the 'innerbox' DIV (pink) doesn't expand to the width of the box DIV (orange border) so I get a white space on the right hand side.. Even setting width: 100% doesn't work On Mozila: - Extra long text spills outside of its containing div. Yuck. Any pointers on how to make this work equally well on Mozilla and IE such that the inner div is 100% and the text from the h5 doesn't spill out and willl expand the outer div if ncessary? thanks -j. Hi, I have a problem. The page with css is loaded as I would expect in MSIE. However in Mozilla 1.6 and Firebird, the css is ignored. Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl-nl" lang="nl-nl">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="/css/preek.css" />
<title>God is tegenwoordig</title>
The page will only load in Mozilla and Firebird as expected when I leave out the lines: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Changing towards another doctypes does not change a bit. The css-file is served as text/css - so that's fine. Further, the html is validated and ok, same goes for the css. Sitting with my head in my hands... Hope you can help me, because page looks like the old days (mosaic) My site is http://www.shiningstarsyouth.com/. If you render the page in IE and Mozilla it seems that Mozilla renders my nav bar a couple of pixels lower than IE. Also the hover link style sheet that I used on the links in the upper right of the page work in Mozilla, but not in EI. The long vertical grey line that goes down the center of the page also renders differently in length. Why do these differences exist Please see the screenshots below. Im using offsetTop + offsetHeight of the headings (Menu1, etc) to assign style.top to the sub menus. They appear when you mouseOver the headings. See how there is a pixel or two of whitespace in IE6 w/sp1? Why is that? Any help would be greatly appreciated. PS - I tried this on another PC with IE6 and sp2, and it was fine. These are the style declarations: Code: .menuHeading{
padding-left:3px;
font-size: 8pt;
font-weight: bold;
background-color: #ffffff;
color: #000000;
cursor: default;
position: relative;
margin-bottom: 0px;
border-width: 0px;
border-style: none;
}
.menuHeading_highlight{
padding-left:3px;
font-size:8pt;
font-weight:bold;
background-color:#fff392;
color:#000000;
cursor:default;
position: relative;
margin-bottom: 0px;
border-width: 0px;
border-style: none;
}
.subMenu{
font-size:8pt;
color:#cc9900;
width: 200px;
visibility:hidden;
cursor:default;
position: absolute;
padding:0px;
margin-top:0px;
margin-left:0px
}
|
|||||||