|
CSS - Site Works In Ie7 And Firefox3, But Not In Ie6
The top navigation displays fine on the two browsers, but on IE 6 it turns in to a vertical list:
http://amarshah.org/bruce/ This is a joomla site and uses the magic menu mod to create the custom font menu. Page Code: Code: <table class="pill"> <tr > <td class="pill_m"> <div id="menuspace" style="float: left;"> </div> <div id="pillmenu" style=" width: 810px; margin-left: auto; margin-right: auto;"> <jdoc:include type="modules" name="user3" /> </div> <div id="menuspace2" style="float: left;"></div> <div id="pillmenu" style="width: 470px; margin-left: auto; margin-right: auto;"> <jdoc:include type="modules" name="user4" /> </div> </td> </tr> </table> CSS Code: Code:
/* horizontal menu */
table.pill {
width:900px;
padding: 0;
margin: 0;
height:87px;
border: none;
text-align:center;
}
td.pill_m {
padding: 0;
margin: 0;
text-align:center;
}
#menuspace {
width: 900px;
height: 15px;
background-color: #d2cdb7;
}
#menuspace2 {
width: 900px;
height: 13px;
background-color: #d2cdb7;
}
#pillmenu {
width: 900px;
height: 22px;
background-color: #d2cdb7;
text-align:center;
}
#pillmenu ul {
margin: 0;
padding: 0;
list-style:none;
}
#pillmenu li {
float: left;
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#pillmenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
display:block;
height: 22px;
padding: 0px 4px;
color: #000000;
text-decoration: none;
}
#pillmenu a:hover {
color: #96abbe;
}
#pillmenu a#active_menu-nav {
height: 22px;
}
Similar TutorialsHi there, I'm having a little trouble with a site I'm designing in IE6 and FF3 on WinXP. It works fine in FF3 on MacOSX. As soon as I fix it in one browser, it goes to crap in the other. Here's the problem in IE6: And here's the issue in FF3 on XP: I checked the heights of the divs and set all the margins to zero. The nav and search are floated. The bar under the nav is a div with a colored background, it clears the floats. What am I missing? Sorry if I seem like a total noob, thanks in advance. Edit: Sorry! I forgot the link. Here it is: http://teachmelighting.com Hi I have a website which works fine in Firefox, but has problems in Internet Explorer. can someone please have a look and see what is wrong? the positioning of the Div boxes go wrong in IE, and also it seems like the site is scretched vertically. many thanks The problem is fixed now Hello, In the last few days I made this website: http://www.gambiaguesthouse.nl/index.php?site=home I tested it with firefox and once a day i tested it with IE. Now the site works like a charm in Firefox but after the changes I made today It doesn't work under IE. The width of the site is not correct in IE. This is the CSS code of the website, if I remove the "#all..." part that I made bold the width is correct, but then the site gets very ugly. When I put the "#all..." part back the width of the site isn't correct in IE. De W3C CSS checker gives no errors I hope somebody can see what I do wrong, I am working to figure this out for 2 hours now and I can't find out what the problem is Hope you guys can tell me what I did wrong with my CSS code. Code: body { font-family: verdana; background-color: #bbdaf9; margin: 0; padding: 0; }
#all { color: #062A4E; font-size: 14px; background-color: #e9f3fe; position: relative; width: 632px; min-height: 609px; margin: 7px auto 30px; padding: 202px 167px 10px 204px; }
#head { position: absolute; top: 0; right: 0; width: 1003px; height: 187px; padding-top: 5px; background-image:url(img/titel.jpg); }
#footer { position: absolute; top: -500px; }
#con { background-color: #f3f7fb; width: 100%; min-height: 620px; }
#add { position: absolute; top: 198px; padding-top: 4px; right: 0; width: 165px; height: 605px; }
#menu { position: absolute; top: 198px; left: 0; padding-top: 4px; right: 0; width: 200px; height: 150px; }
#login { position: absolute; font-size: 14px; top: 348px; left: 0; width: 190px; background-color: #e0eefc; border-style:solid; border-color:#f3f8fe;}
#rotating { position: absolute; top: 470px; left: 0; padding-left: 5px; padding-top: 4px; right: 0; width: 200px; height: 350px; }
a { color: #c40000; font-size: 10px; text-decoration: none; margin: 0; padding: 0; border-width: 0; cursor: pointer; }
a:hover { color: #c40000; }
.whitetb { color: white; }
img { margin: 0; padding: 0; border-width: 0; }
li { list-style:none; float: left; text-align: center; border-style:solid; border-color:#f3f8fe; }
ul { border-top: 0px solid #FFF; width: 195px; height: 145px; background: #e0eefc; margin: 0; padding: 0; }
a.menuitem { padding-top: 3px; font-size: 16px; color: #062A4E; text-decoration: none; font-weight: bold; display: block; width: 190px; height: 27px; }
a.menuitem:hover { background: #DCEFF8; color: #116086; }
And this is the HTML source code of my website: PHP Code: <html> <title>GambiaGuesthouse.nl</title> <link href="stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <div id="all"> <div id="head"></div> <div id="menu"> <ul> <li> <a class="menuitem" href="index.php?site=home" title="Home">Home</a> </li> <li> <a class="menuitem" href="index.php?site=links" title="Links">Links</a> </li> <li> <a class="menuitem" href="index.php?site=toevoegen" title="Guesthouses">Guesthouses</a> </li> <li> <a class="menuitem" href="index.php?site=contact" title="Contact">Contact</a> </li> </ul> </div> <div id="rotating"> <img src="img/rotate1.jpg" id="rotate"></div> <div id="login"> <form target="index.php?site=login" method="POST"> Gebruiker:<br> <input type="text" name="gebruiker" size="27" /><br> Wachtwoord:<br> <input type="password" name="wachtwoord" size="27" /><br /> <input type="submit" value="Log In" /> </div> <div id="add"> add comes here </div> <div id="con"> <b>Gambia</b><br /><br /> Het is een prachtig land, waar je avontuurlijke dingen kan doen. Maar vooral lekker uitrusten op de prachtige stranden. <br>Het is een geweldig gastvrij land.De plaatselijke bevolking bezit een unieke gave.ze kunnen in het nu leven,en genieten van het moment.</p> <p>Dan is er voor je gevoel even geen verleden en ook geen toekomst,alleen het NU en dan kan je echt leven in zijn puurste vorm,je openen en gelukkig zijn,en dit kunnen de mensen in Gambia. <br>Daarom vind ik dit zo een mooi land,het is prachtig om te zien hoe deze mensen kunnen genieten. dankbaar zijn een groot goed is.</p> <p> Op deze website vindt u een zo groot mogelijk overzicht van Guesthouses in the Gambia.</p> <p>Guesthouses zijn huisjes die verhuurd worden meestal door de lokale bevolking en zijn meestal een stuk lager geprijsd van de hotels in Gambia <br>Ook als u met een groot gezelschap van plan bent om naar Gambia te gaan is een Guesthouse de perfecte manier om te verblijven in Gambia.</p></div> </body> </html> Hi I am not new to web development but fairly new to css and learning css-xhtml for web 2.0. I am making a design at http://www.superstaruk.com/v/ it shows fine in IE but in FF, Chrome and Opera etc it shows broken. Main problem is with pistioning the divs and also the background of free delivery does not appear. Can anybody help me please by pointing out the problem? I read the box-model but even according to that i am unable to solve this. thank you well i sort of know why, because they render things differently but i have looked in my code and cant figure out why it will be different for ff click here I have pulled my last hair so I come to you with a red face. these tags are in the head section Code:
h3 {color: blue}
pink {color: blue}
In the body I have Code: <h3> what color is it? </h3><BR> <pink> it should be blue </pink> both lines print in blue on FF. IE6 shows h3 in blue but pink is plain, black text. Please embarass me with a simple answer. Thanks in advance, stujo NEWB here. Working on a project that has a custom ul w/ background images and sub menus the css currently in place works for all browsers except IE when using the IE developer tool, I can see all the applied styles for the items. For some reason IE is just randomly throwing in a padding-top from somewhere that's screwing up the alignment. There is NO source css file referenced or noted as to where it's coming from. As soon as it's removed, it display properly. I have explicitly set the style in the UL and the li to have the correct padding, but IE just seems to ignore them and throws in a padding of it's own. ANY IDEAS here? Anyone? Beuller? Here's the css code. Code:
.toolbar a:hover, .toolbar a:focus, .toolbar a:active {
background-color:#F5F9FA;
}
.toolbar {
border:0;
padding:0;
margin:auto;
border-collapse:collapse;
}
.toolbar a {
display:block;
text-align:center;
vertical-align:middle;
white-space:nowrap;
}
.toolbar a:hover, .toolbar a:focus, .toolbar a:active {
text-decoration:none;
}
It works fine when you hover over a link, it lights up the back of the td which is what I want. However I would like the whole td to act as a link. So wherever you move the mouse over the td it lights up and would link to the page, instead of just over the text. Any suggestions? I've seen this type of nav bar on different websites and have tried to figure out how it's used, but I don't know what I'm looking for. An example is on the Twidroyd site (you can google it--as a new user I can't post links) The nav bar image is three bars stacked one on top of the other, where there are bars for inactive, active, and hover. I can't figure out how this works. Not necessarily asking for a detailed explanation, just what the technique is called so I can research it myself. Any help appreciated! I have the following CSS: Code:
#leftcontent
{
position: absolute;
top: 135px;
left: 20px;
width: 150px;
border: 0px;
}
#centercontent
{
border: 1px solid #999999;
top: 135px;
margin-left: 170px;
margin-right: 140px;
}
html>body #centercontent
{
margin-left: 170px;
margin-right: 140px;
}
#rightcontent
{
position: absolute;
top: 135px;
right: 20px;
width: 120px;
border: 0px;
}
This works just fine in Firefox, but I see some problem in IE6. As I resize the width of IE window, the right border line of the center content disappears. Maybe this CSS has some problem; maybe html inside has some problem. I don't know exactly what is causing this, but I need to fix it. I don't want the right border line to disappear. I want it to be visible at all times. How can I fix this problem? How can I make the right border line visible at all times? (This is where I use this CSS.) Fixed. is there anything special i need to do to get CSS to work with IE? Here is what i have above the </head> tag Code: <link rel="stylesheet" type="text/css" href="layout.css"> the layout.css has: Code:
catheader {
color:#ffffff;
font-size: 14px;
font-weight: bold;
font-family: verdana;
}
then in the <body> i have Code: <catheader>My New Category</catheader> In netscape it shows correctly, in IE it doesnt read it at all. any ideas? hi The following CSS code works in Firefox, but not IE. The site has a fixed top bar using CSS which works perfectly in firefox, but stuffs up in IE. Does anyone know what I need to change it to to fix the problem? Code: html, body
{
margin: 0;
padding: 0;
height:100%;
max-height:100%;
font-size: 90%;
font-family: verdana, sans-serif, arial, helvetica;
background-image: url('images/gradient.jpg');
background-repeat: repeat-x;
background-color:#fff;
}
#header
{ position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
z-index: 1;
height: 50px;
margin-bottom: 2em;
background-image: url('images/gradient2.jpg');
background-repeat: repeat-x;
}
#topmenu
{
position: absolute;
left: 250px;
top: 30px;
width:560px;
}
#stats
{
position: absolute;
right: 15px;
top: 5px;
text-align: center;
}
#gutter
{
float: left;
width: 3%;
height: 1px;
}
#col
{
float: left;
width: 70%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#rescol
{
float: left;
width: 94%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#rescol a {
text-decoration:none;
}
#rescol td {
text-align: center;
}
#col1
{
float: left;
width: 45%;
margin-bottom: 1em;
border-right: 1px solid #ccc;
padding-right: 3%;
margin-top: 5.5em;
}
#col2
{
float: left;
width: 15%;
margin-left: 3%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#col3
{
position: absolute;
right: 30px;
margin-left: 3%;
margin-bottom: 1em;
margin-top: 5.5em;
}
#footer
{
clear: both;
height: 50px;
padding: .5em;
font-size: 11px;
}
#footer ul {
border-top: 1px solid #ccc;
margin: 0;
padding: 1em 0 0 0;
list-style: none;
}
#footer li a, #footer li span {
display: block;
float: left;
padding: 5px 1em;
border-right: 1px solid #ccc;
}
#footer li span.copyright {
border-right: none;
}
a:hover {
color: #003;
}
h1
{
margin: 0;
padding: .5em;
}
h2
{
margin: 0;
}
hr.c {
border: none 0;
border-top: 1px solid #ccc;
width: 100%;
margin-bottom: 10px;
text-align: center;
height: 1px;
}
<!--[if IE 6]>
body
{
overflow: hidden;
}
div.content
{
height: 100%;
overflow: auto;
}
<![endif]-->
www.strutmag.com/newstrut/ I'm working on a site that is using CSS layout. I use a Mac at work and the site looks great on it. I've checked it on the Mac on Safari, IE, and Firefox. When I went home the other day, and I checked the site on my PC (on IE and Firefox), the site did not layout correctly. I think the main issue is the relationship between the left section (where the large image is) and the floated right content box. I was really surprised to see it not working on my PC, so now I'm at a loss. I'm wondering if anyone has any suggestions about about the cross-platform, cross-browser differences I need to account for. Please help! Thanks! CSS I have the following CSS that I believe is valid, but it only works in IE. In fact in IE it works perfect, but in FireFox it does not display anything at all. Code: <div style="font-size:8px; text-align:left; background-color:red; width:100px;"><div style="font-size:8px; background-color:green; width:75px;"></div></div> What I am trying to do is display a rating. In the above example, the rating is 75/100, so a green bar 75px long over a red bar 100px long. Using Axure to create working prototypes for use in usability testing. The code created by Axure works well in IE7 but the function does not work in IE6...which I think, most of my usability testers will be using. What this code is trying to do is, click on a link in one box which automatically copies and pastes the code to destination box. The idea is to let the user copy and paste content from a previous message. Has anyone ever come across this issue? I'm sure it how IE handles .css but was hoping there may be a fix. Code: <DIV id=u23_rtf><span style=" font-family:'Arial'; color:#000000; font-size:15px;"><b>Message:</b></span></DIV></DIV> <SELECT id=u24 style="position:absolute; left:290px; top:558px; width:180px; height:22px; ; background-color:#FFFFFF; text-align: left ; font-family:'Arial'; font-size: 13px; color:#000000; font-style:normal; font-weight:normal; text-decoration:none" > <OPTION selected value="English">English</OPTION> <OPTION value="Spanish">Spanish</OPTION> </SELECT> <DIV id=u25 style="position:absolute; left:505px; top:623px; width:230px; height:18px; ; ; text-align: left ; font-family:Arial; text-align:left; word-wrap:break-word;" > <DIV id=u25_rtf><span style=" font-family:'Arial'; color:#000000; font-size:15px;"><b>Copy Previous Message</b></span></DIV></DIV> <SELECT id=u26 size=2 style="position:absolute; left:505px; top:646px; width:230px; height:120px; ; background-color:#FFFFFF; text-align: left ; font-family:'Arial'; font-size: 13px; color:#000000; font-style:normal; font-weight:normal; text-decoration:none" > <OPTION value="Contribute more to your / English">Contribute more to your / English</OPTION> <OPTION value="Happy Holidays / English">Happy Holidays / English</OPTION> <OPTION value="Hola / Spanish">Hola / Spanish</OPTION> <OPTION value="Time to consolidate / English">Time to consolidate / English</OPTION> </SELECT> Hi, I have apage where the div only works on the bottom on the page. I am trying to place it also in the center to divide content. Here is the CSS code: Code: .doubleLine{
clear:both;
position:relative;
float:left;
width:1172px;
height:6px;
background-image: url(images/common/double_line.gif);
background-repeat: no-repeat;
margin-left:37px;
margin-right:0px;
margin-top:6px;
margin-bottom:6px;
padding:6px 0px 6px 0px;
}
can anyone tell me why this div with an image won't appear between content? I havetried everything I could think of. thanks I got my css menu to work in Firefox and have it to show the way I want it to, but now in IE it just shows up as a list of course, the experienced people will no that by looking at the code which I hope you can help me out by fixing it, so here it is dont laugh. Code: ul#menu{
margin:0;
padding:0;
list-style-type:none;
width:790px;
display:block;
height:40px;
text-transform:uppercase;
font-size:13px;
background:transparent url("images/black.jpg") repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;
border-right:1px solid #ffffff;
}
ul#menu li a{
display:block;
float:left;
color:#ffffff;
text-decoration:none;
padding:12px 20px 0 20px;
height:28px;
}
ul#menu li a:hover{
background:transparent url("images/blue.jpg") repeat-x top left;
}
Thank You I am trying to make a menu on my website and it works well on internet explorer 7. I went onto firefox to check it and it is not working so great. The link is:-alrwritingservices.co.uk. The css:- Code: .solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(backygnav.gif) center center repeat-x;
list-style
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
float: left;
color: #FFFFFF; font-weight: bold;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.solidblockmenu li a:visited{
color: white;
}
.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(backgnavhover.gif) center center repeat-x; text-decoration: none; font-weight: bold; float: left;
}
The html:- Code: <ul class="solidblockmenu"> <li><a href="index.php" class="current">Home</a></li> <li><a href="about.php">About Me</a></li> <li><a href="samples.php">Samples</a></li> <li><a href="manual.php">Manual</a></li> <li><a href="testimonials.php">Testimonials</a></li> <li><a href="quote.php">Get A Quote</a></li> <li><a href="faq.php">FAQ Section</a></li> </ul> <br style="clear: left" /> How would i make it look better in firefox and would would be the hack for internet explorer. Is theer any help available on the internet about this? Many thanks in advance, Stevo Hi, I'm trying to create a transparent background for the main text part of a site. I have the following code in the .css file: Code: .dataContainer {
background-image:url('/images/transluscentbg.png');
*background: none:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transluscentbg.png',sizingMethod='scale');
padding:10px;
}
and call it he Code: <html><head>
<link rel="stylesheet" type="text/css" href="styles/kr.css" />
<meta name="description" content="">
<meta name="keywords" content="">
<script src="rollover.js" type="text/javascript"></script>
</head>
<body id={$styleName|lower}>
<!-- BEGIN OUTER WRAP -->
<div id="bodywrap">
<div id="logoSpace">
</div>
<!-- BEGIN MAIN CONTAINER -->
<div id="content">
<div id="contentBorders">
<div id="mainContent" class="clearfix map{$mapNum}">
<div id="navBar">
<div id="innerContent" class="clearfix">
{include file="nav.tpl"}
<div class="goContent">
<div class="dataContainer">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum
</div>
</body></html>
This works fine in Firefox, but .dataContainer has no transparent background in IE. HOWEVER! It does work in both IE and Firefox if, instead of using <div> tags, I put the content in a table (<table><tr><td class="dataContainer">). Anyone have any idea why this might be happening and how i might be able to get the <div> to work? |
|||||||