|
CSS - Css Applied In Ie, But Not In Firefox - Please Help
I am attempting to add what at first glance looks to be a gradient border down the sides of my container, and it has worked fine in IE, but in Firefox, said style element stops after a certain header box, before the page moves into the main content of the site (which has elements floated).
Please have a look at the following page in both IE and Firefox, and you will see the problem: tombstonemedia.com/noise/venues.htm and the stylesheet for this page is: tombstonemedia.com/noise/style.css If anyone knows what exactly it is that I need to tweak in order to make the effect be cross-browser compatible, please let me know. Similar TutorialsThis is a bit puzzling for me. I read that I can apply css to something based on id, which I have been doing, thats how my template is made, USING CSS :S. I need to apply css to an H2 that already has css applied to it but has a different id. Here is the page I need to do it to, view it and see why I need to. http://www.coldfusionzone.com/index.php?p=7 Look down towards where the comments are and youll see Leave a comment I need to change that to where it expands up to 40 pixels from the side, and has a black background without the stinkin date pic next to is . Now that Im talking about it im confused again. Ha ha I had it down pat but now that I need help im confused thats strange. But I need to apply a css style to it when it already has a css it.... Here the css style that controls it is on top and the css style im trying to use is on the bottom. PHP Code: div#content h2 { background: #000 url(images/date.jpg) no-repeat left center; background-color: #232323; color: #5F5F5F; padding: 2px 15px 2px 85px; border: 1px solid #494949; margin-left: 40px; margin-right: 220px; margin-bottom: 10px; margin-top: 0; font-size: 95%; font-weight: normal; } div#content#postcomment h2 { background: #000; background-color: #000000; color: #5F5F5F; padding: 2px 15px 2px 85px; border: 1px solid #494949; margin-left: 40px; margin-right: 220px; margin-bottom: 10px; margin-top: 0; font-size: 95%; font-weight: normal; } The section of my site that this effects is a login area, so I can't provide a link... I can post some code if I need to... I have a div with this class applied to it. Code: .minidaysofweek div{
width:13.6%;
float:left;
font-weight:bold;
}
It was working fine here, but when I put it in my site template, the bold doesn't work. So I added color:blue; just for testing, and it changed the color... what would keep the font-weight from being applied? The minititle class isn't bolding either like it should... <edit>FF and IE effected</edit> For the life of me I cant find out what code that will align the image correctly. Currently the "previous" button on the page below has a gap on the left, and is being cropped on the right. http://zombiemod.com/rm/nina2/main.php?g2_itemId=13 This is the image im talking about: http://zombiemod.com/rm/nina2/theme...ntrols-left.png I guess if I remove the space to the left of the previous button, it will drag the image to the corrct position so all of the image is being displayed without having the right side cropped. Here is the HTML for the button: Code: <ul id="control-buttons"> <li><button id="controls-left"> <img src="themes/ajaxian/images/controls-left.png" alt="Left" /> </button></li> <li><button id="controls-play"> <img src="themes/ajaxian/images/controls-right.png" alt="Play" /> </button></li> <li><button id="controls-right"> <img src="themes/ajaxian/images/controls-right.png" alt="Right" /> </button></li> </ul> This is the code I used to try and set the correct height of the buttons: Code: #slideshow-controls button {
width: 44px;
height: 59px;
/*margin: 0;
padding: 0;*/
background-color: #000;
border: none;
text-align: center;
cursor: pointer;
}
Hi, I have a XHTML 4.0 file and CSS in a separate file. The CSS if included within the <head> section of the HTML file works correctly and displays the page with the right formatting. However, when I move the CSS to a separate file and just use the <link> tag within the <head> section of the HTML file to link to this CSS file, the formatting is not applied. I am not sure what to do. Any quick help is greatly appreciated. Thanks xworder Hi I think this is some kind of IE 6 bug I am adding some elemnts to the page using the following code: etc... my_new_node3 = wd.createElement('span'); my_new_node3.setAttribute("class", "beep4"); my_new_node3.appendChild(wd.createTextNode("")); my_new_node3.appendChild(wd.createElement('br')); my_new_node3.appendChild(wd.createTextNode("")); my_new_node2.appendChild(my_new_node3); etc... This is not a problem and it works fine. The problem is that when I add this to the page the css (from an external style sheet) that should apply does not. It is some kind of IE bug, I have tested it extensively in Firefox, using the DOM inspector - where it works fine and I can see that all the elements have been created / added to the page correctly. I have also confirmed that the correct elements are being created in IE it is just that styles are not being applied to the created elements. The styles work in Firefox and also in IE under normal circumstances (when the elements are not created on the fly) I'm sorry that I can't give more detail, but its deeply burried in an application and I thought putting in the relevant css etc might just make it more confusing. Any help very appreciated. Thanks. All, I have a header on this page backup.whiteslimo.com with 3 images inserted into it listing the company name, service, and contact info. My problem is that when they are displayed there is a thin white border on the bottom and right hand sides of each image. But the image doesn't have these borders. If you are in Firefox/Mozilla and you right click on the individual images and select View Image, you will see that the image itself does not have these borders. I am thinking that somewhere along some attribute is being added that is causing this but since I am a CSS neophyte (This is still my first week lol) I am not sure. Any help is much appreciated. I have nested divs and on the most outer div i apply a background-color but it is only applied to half of the divs?? it happens BOTH in firefox & IE!! PHP Code: <style type="text/css"> /********** layout of the page ***********/ #top { background-color:yellow; clear:both; } /***************** Formatting top part of the page **************/ #tag { float:left; margin-left:8em; } #login { float:right; } #logo { margin-left:2em; float:left; clear:left; } #searchBox { float:right; clear:right; } #links2 { clear:right; background-color:yellow; } #links2 li{ font-size:0.8em; display:inline; float:right; text-decoration:none; list-style:none; padding:1em; } </style> </head> <body> <div id="top"> <div id="tag"> <p id="">Zahra Zahra Ltd</p> </div> <div id="login"> <p>Login/Register</p> </div> <div id="logo"> <a href="index.php"><img src="images/site/zahra.jpg" width="65" height="59" /></a> </div> <div id="searchBox"> <form action="search.php" method="post" style="margin:0em; padding:0em;"> <label>What are you shopping for?</label> <input type="text" name="search" value="search" size="14"/> <input type="submit" name="submit" value="Go" /> </form> </div> <div id="links2"> <ul> <li>Contact Us</li> <li>Testimonial</li> <li>Return Policy</li> <li>News</li> <li>FAQ</li> <li>about us</li> <li>Home</li> </ul> </div> </div> Why do margin and padding widths act differently when applied to a floated item in Internet Explorer? I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. I'm having an issue where a website is showing up a few pixels off in Mac Firefox than it is in PC firefox. Anyone have a quick fix for this? Mac Screenshots: http://graffetto.com/chops/clairus_screens.pdf PC Firefox Screenshot: Firefox, IE, and Netscape all look identical on PC, while firefox, IE and safari look identical on Mac, but different from PC (except safari - messed up text) Any help is greatly appreciated Edit: after reviewing my post I realized I was quite vague. What I'm looking for is a way to filter CSS so that only Mac Firefox users will receive one CSS file, and PC users will receive another. Have a page at www.maxxedmotors.com/damo There is a div called "container" which is supposed to surround all of the content with a border. This works fine in IE 6/5.x, but in firefox the border only surrounds the div called "header". Can anyone tell me where i'm being dumb Any help greatfully appreciated. now i don't like saying things like possible bug because 99/100 it's not a bug, but some kind of user error. however, i have the following situation and i thought that describing it as a bug may get people interested in it two tables, both with auto width / height, both the same code. one table is set so that when viewed on screen it has display: none and then when printed it has display: block. if you do a print preview in internet explorer, the page shows two identicle tables. in mozilla, the table expands to fill the width of the page for the hidden table. see html attached for example; load in firefox / ie; do a print preview and you'll see what i mean. any ideas? I see there is another post here on this. But it may be a different issue. I was hoping some of the experts could take 30 seconds to see why this looks fine in Firefox and not IE. It did validate at w3c. I am sure there is a hack, but if there is something that sicks out real quick it would be much appreciated. I know everyone gives there extra time here and it is greatly appreciated. echo9design.com/willoughby/index3.html i read the thread posted about this not too long ago, and tried out the DOCTYPE! tag suggested, along with a few others from W3... however all that did was screw up the page more. anything you could do to help would be great Page Link I created a menu for someone, hideous as it may be, it's what they wanted. However, it works in Firefox but not in Internet Explorer. This is code I used for the menu. .Menu ul li { float:left; position:relative; list-style-image:url(images/divider2.gif); margin:0 15px 0 20px; padding:0; } I have an image to replace the bullets that would normally appear. In Firefox it appears with the image as it should, but in Internet Explorer it is not showing up like it should. my css in IE is GREAT and look good. but on firefox, it doesnt show my background and all that. can anyone give me some suggestions. www.na-magodai.net I have a site using CSS for layout It has one main div called main-column that sits in the middle of the page and has a background image. Within this there are 3 columns columns. the trouble is the background of the main column does not show up behind these three. If you right click it says there is a background image there but nothing is showing. my css is: Code: #main-column
{
width:750px;
height: 100%;
margin-left: auto;
margin-right: auto;
background-image:url(/site_images/bodyback.jpg);
}
#left-column
{
width:150px;
float:left;
}
#contents-column
{
width:450px;
float:left;
}
#right-column
{
width:150px;
float:right;
}
and html is: Code: <!-- Start of main column -->
<div id="main-column">
<!-- Start of Left Column Div -->
<div id="left-column">
<? include("../includes/leftnav.php"); ?>
<!-- End of Left Column Div -->
</div>
<!-- Start of contents Column Div -->
<div id="contents-column">
<? include("../includes/main.php"); ?>
</div>
<!-- Start of right Column Div -->
<div id="right-column">
<? include("../includes/rightnav.php"); ?>
<!-- End of right Column Div -->
</div>
<!-- End of Main Column Div -->
</div>
Any idea how I can correct this? I have a question regarding CSS and it's compatibility with FireFox, the problem is, when I have the CSS in a seperate file (e.g. <link rel="stylesheet" type="text/css" href="content.css"> ) it wont work in FireFox browser, works fine in Internet Explorer, but when I copy and paste the CSS directly onto the page, in between the <head> </head> tags of course, it works fine in FireFox and Internet Explorer fine, what am I doing wrong, do I need to specify something in the "stylesheet type" tag above? Any help would be great! |
|||||||