|
CSS - Inconsistency Between Broswers
I can't for the life of me figure why IE displays this differently than all the other browsers I've tried (FF, Opera, Chrome).
www dot ultra-ms dot com slash test At the bottom of the page I have a navigation section as well as a breadcrumb trail. The navigation is pushed to the left side and the breadcrumb to the right. IE, however, inserts a line break between the two causing the breadcrumb to be on the next line down. I want them on the same line. Here's the CSS rules that govern this section Code:
#footer {
font-size: 8pt;
font-family: Arial, sans-serif;
color: #999999;
width: 990px;
padding-left: 10px;
border-top-style: dotted;
border-top-color: #999999;
border-bottom-style: dotted;
border-bottom-color: #999999;
border-width: thin;
clear: both;
}
.breadcrumb {
float: right;
padding-right: 15px;
}
And here is the HTML for that part. Code:
<div id="footer">
<a href="index.html">Home</a> | <a href="profile.html">Profile</a> |
<a href="capabilities.html">Capabilities</a> | <a href="careers.html">Careers</a> |
<a href="contact.html">Contact</a> | <a href="sitemap.html">Site Map</a>
<div class="breadcrumb">
<a href="index.html">Home</a> > Careers
</div>
</div>
Can someone help? Similar TutorialsCan 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 Hi all, I'm something of a noob when it comes to html and css but I usually manage to scrape by. However I have a bizzare problem. I have a background image (that I'm not repeating due to a graphic) and I want it positioned at the top left hand corner of the browser window. I used CSS positioning to achieve this and it works just fine, however, when I uploaded my files online to my server, the image won't go to the upper left hand corner of the browser window. It sits there close to the upper hand left side but doesn't touch the end, and there is a black border around the image (which is the color I've set as the background). So my issue is, when I work off my mac, the background image is positioned where I want it to be, but once I upload my files to my site, it disregards that positioning and puts the background image in something of a default position. I've checked on Safari and Firefox and they both do the same thing, but display correctly when I view the html file off my computer. Is there some formatting thing that I'm missing? Here is my code: HTML: <div id="background_image"><img src="background.jpg" alt="background" /></div> CSS: #background_image { position:absolute; left:0px; top:0px; z-index: 1; } Hiya, I was wondering if anyone out there would be willing to take a look and tell me why this works in everything except IE6. I really don't want to go back and re-architect this with tables. it took too long in the first place. http://www.theblackkeys.com/dev/ Any quick help is appreciated. Original deadline was tonight. Hi everybody, The basic set up of a site I'm creating is I have a div with a table inside it both set to 1000px wide. Within the table are the images that make up the background of the site. Also within the core div is another div which contains a music player set to absolute positioning. Everything looks perfect in IE however the music player goes beyond the bottom of the image behind it in Firefox. The music player itself doesn't move, only the pictures behind it so that leads me to believe it's an issue with where the starting point of the table is rather than the core div. I'm completely out of ideas. Does anybody have any thoughts? I tried to include a link to the page incase anybody wanted to look at the actual coding but the forum wouldn't allow me since I'm a new user. I'm sure this question has been asked a million times. I have some navigation that looks like this when closed: Link1 Link2 Link3 Link4 and this when open: Link1 Link2 Link3 sublink for Link3 Link4 I've used "margin" for the subLink class to create the right amount of space above and below the sublink, but it gets displayed totally differently in the different browsers. On my mac it looks perfect with margin: -16px 0px 0px 4px; but on Windows the negative margin has the result that the sublink gets displayed right on top of Link3. Using margin is probably not the right way to do it. Padding has the same effect. Can anyone help? Thanks, LauraS. The submenus are not lining up properly in Firefox or Safari but it looks right in IE. If I fix how it looks in Firefox and Safari, it will not look right in IE. Anyone know how to solve this? Here is the link: link to problem Hi All. I am getting an extra space in FireFox. The space is fixed when I disable the 'Browser Default Styles' in FireFox. IE7 shows it OK. http://holzgreen.com/gap/ any comment is appreciated. sukruB |
|||||||