|
CSS - Ie / Firefox - Slight Irregularities In Both
In Firefox my page is dropping the center orange header for some reason. And in IE the text under the orange headers is moving over for an image that is floated to it's left, even though the text div's left margin is set high enough to clear it. Any help would be apprciated.
Page is he Code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
margin:0;
padding:0;
text-align: center; /* IE5/Win fix */
height:100%;
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
color:#333333;
}
#wrapper {
width:750px;
margin:auto;
position:relative;
}
#top {
width:750px;
height:60px;
padding:5px 1px 0 3px;
position:inherit;
}
#toplink {
height:60px;
width:365px;
margin-left:380px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
}
#nav {
list-style:none;
width:416px;
float:right;
width:420px; !important
}
#nav li {
width:100px;
height:20px;
margin-left:4px;
float:left;
position:relative;
}
a.inactive, a.inactive:link, a.inactive:visited, a.inactive:active {
display:block;
height:15px;
background-image:url(images/inactive.gif);
background-repeat:no-repeat;
color:#999999;
text-align:center;
text-decoration:none;
padding-top:5px;
font-weight:bold;
}
a.inactive:hover {
color:#888888;
}
a.active, a.active:link, a.active:visited, a.active:active {
display:block;
position:absolute;
width:100px;
height:16px;
top:0;
left:0;
z-index:1;
background-image:url(images/active.gif);
background-repeat:no-repeat;
color:#334C99;
text-align:center;
text-decoration:none;
padding-top:5px;
font-weight:bold;
}
#subnav {
list-style:none;
/*list-style-image:url(images/subnav_arrow_blue.gif);*/
background-image:url(images/subnav_background1.gif);
height:22px;
clear:both;
border:1px solid #CECECE;
/*border-bottom:0;*/
color:#999999;
}
#subnav li {
width:124px;
height:18px;
text-align:center;
float:left; /*Change order of subnavs high to low or low to high*/
}
#subnav li a, #subnav li a:link, #subnav li a:visited, #subnav li a:active {
display:block;
height:14px;
padding-top:4px;
text-decoration:none;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color:#999999;
}
#subnav li a:hover {
color:#888888; /*CHANGE ME TO BLUE, ORANGE, OR SOMETHING*/
}
#subnav li a:active {
color:#334C99;
}
#midbanner {
height:170px;
background-image:url(images/banner.gif);
margin-bottom:3px;
}
#bottomcontent {
text-align:left;
color:#000000;
}
#leftboxes {
width:190px;
height:auto;
padding:5px 8px 0 1px;
float:left;
border-right:1px dashed #cccccc;
}
.leftbox, .leftboxBottom {
height:80px;
width:98%;
border:1px solid #8D8D8D;
background-image:url(images/leftboxstripSM.gif);
background-repeat:repeat-x;
background-position:top;
color:#334C99;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
padding-top:2px;
}
.leftbox{
margin-bottom:10px;
}
#rightboxes {
width:535px;
padding:5px 0 0 0;
margin-left:210px;
}
.rightbox1, .rightbox2, .rightbox3 {
position:relative;
height:176px;
width:165px;
background-image:url(images/teststrip8z.gif);
background-repeat:no-repeat;
background-position:top;
color:#ffffff;
font-weight:bold;
}
.rightbox1 {
float:left;
}
.rightbox2 {
margin-left:183px;
}
.rightbox3 {
float:right;
}
.packagetitle {
margin: 5px 0 0 28px;
font-size:12px;
}
.packagecontent {
margin: 12px 0 0 50px;
font-size:9px;
font-weight:normal;
color:#666666;
line-height:15px;
}
.packageimg1, .packageimg2, .packageimg3 {
width:45px;
height:49px;
margin:25px 0 0 0;
background-repeat:no-repeat;
float:left;
}
.packageimg1 {
background-image:url(images/pkg_personal1.gif);
}
.packageimg2 {
background-image:url(images/pkg_smallbiz1.gif)
}
.packageimg3 {
background-image:url(images/pkg_corporate1.gif);
}
#bottombox {
height:80px;
width:535px;
margin-top:10px;
border:1px solid orange;
}
/* hide from IE/Mac \*/
* html #bottomcontent,* html #midbanner {
width:750.5px;
wid\th:750px;
}
/* end hide */
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="toplink" align="right"><img src="images/arrows2_1.gif">Client Login</div>
</div>
<ul id="nav">
<li><a class="active" href="#">Home</a></li>
<li><a class="inactive" href="#">Hosting</a></li>
<li><a class="inactive" href="#">Tools</a></li>
<li><a class="inactive" href="#">About</a></li>
</ul>
<ul id="subnav">
<li><a href="#">Subnav 1</a></li>
<li><a href="#">Subnav 2</a></li>
<li><a href="#">Subnav 3</a></li>
<li><a href="#">Subnav 4</a></li>
<li><a href="#"><img src="images/subnav_arrow_orange1_2.gif" border="0">Subnav 5</a></li>
<li><a href="#">Subnav 6</a></li>
</ul>
<div id="midbanner"></div>
<div id="bottomcontent">
<div id="leftboxes">
<div class="leftbox"><img src="images/bluearrows2.gif">Service Gurantee</div>
<div class="leftbox"><img src="images/bluearrows2.gif">Earn $ For Referrals</div>
<div class="leftboxBottom"><img src="images/bluearrows2.gif">Domain Lookup</div>
</div>
<div id="rightboxes">
<div class="rightbox1">
<p class="packagetitle">PERSONAL</p>
<div class="packageimg1"> </div>
<div class="packagecontent">
<p>300MB Disk Space</p>
<p>3GB Transfer</p>
<p>Unlimited Subdomains</p>
<p>Unlimited Emails</p>
<p>Unlimited Databases</p>
<p>Free Setup</p>
<p>24/7 Support</p>
</div>
</div>
<div class="rightbox3">
<p class="packagetitle">CORPORATE</p>
<div class="packageimg3"> </div>
<div class="packagecontent">
<p>1000MB Disk Space</p>
<p>8GB Transfer</p>
<p>Unlimited Subdomains</p>
<p>Unlimited Emails</p>
<p>Unlimited Databases</p>
<p>Free Setup</p>
<p>24/7 Support</p>
</div>
</div>
<div class="rightbox2">
<p class="packagetitle">SMALL BUSINESS</p>
<div class="packageimg2"> </div>
<div class="packagecontent">
<p>500MB Disk Space</p>
<p>5GB Transfer</p>
<p>Unlimited Subdomains</p>
<p>Unlimited Emails</p>
<p>Unlimited Databases</p>
<p>Free Setup</p>
<p>24/7 Support</p>
</div>
</div>
<div id="bottombox">Ad #4</div>
</div>
</div>
</div><!--end Wrapper-->
</body>
</html>
Similar Tutorialshttp://tinyurl.com/5llwfl I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down. I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes. I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either. I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally. Hi everyone, I'm working on a layout that looks fine in IE7 and in FF but when viewed in with IE6 the header graphics are slightly skewed. I'm not seeing any reason for the problem whatsoever so I'm thinking there needs to be some sort of hack to trick IE6 into displaying this correctly? I'd appreciate any thoughts on why this is happening. Here is the URL... http://www.karenwilliamson.com/joom/ Thanks I am trying to set up four menus on the same page. Please view draft at www.tallnorwegian.com/meyer.htm I am struggling with the menu in the top left corner. The positioning of the first and second level layer. The left menu is meant to mirror the functionality of the right hand side menu. I've torn most of my hair out.... Can anyone help me - and have a look? Much appreciated, Sigi. Hey, I have just about finished this website here except for the footer issue in Internet Explorer. My main issue is that I'm limited to a Macbook Pro right now, I have VM Fusion but haven't been able to use my external harddrive with my virtual machine on it and have no other way to test in IE. Browsershots has it's limitations, haha. Anyway, it displays fine in WebKit and Firefox, but internet explorer is being real finnicky. If I have to I can resort to calling in a modified footer strictly for IE, but then I have to go design a footer for it down at the library so i can use on of their computers to test it. Thought I'd try posting a question here and see if anyone could spot something in my CSS that may not be working with IE. Thanks in advance, really appreciated. The link is http://www.laserbodysculpting.ca/beta/ The screenshots in IE are MSIE7.0 and IE6.0 . I'm using the following DIV structure. (http://pastebin.com/meef27b4) Code: <div id="footer"> <div id="fcont"> <div id="f1" class="fwrap"><h2>Newsletter</h2> ... </div> <div id="f2" class="fwrap"><h2>Map</h2> ... </div> <div id="f3" class="fwrap"><h2>Contact</h2> ... </div> </div> <div id="minifooter"> ... </div> </body> </html> Here is the CSS Code: #footer {
width: 100%;
height: 270px;
position: static;
clear:both;
text-align: center;
border-top:solid 1px #414243;
background:#9a9a9a;
letter-spacing: 0.2em;
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
#footer h2{
font-size: 15px;
color: #414243;
padding:0 0 .5em .1em;
}
.info {
color:#fff;
}
.map {
border: 1px #414242 solid;
margin: 2px;
}
#footer h3{
font-size:10px;
padding:0 0 .5em 0;
letter-spacing:5px;
color:#414243;
font-weight:bold;
}
#fcont {
width:100%;
margin-left:200px;
overflow:auto;
}
#minifooter {
clear:both;
width: 100%;
height: 15px;
padding-bottom:10px;
border-top:solid 1px #000;
background:#414243;
color: #fff;
letter-spacing: 0.2em;
}
#minifooter a:hover {
color:#fff;
}
#f1 {
display: inline;
float:left;
text-align: left;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
width: 300px;
}
#f2 {
display: inline;
text-align: left;
float:left;
position: relative;
margin-top: 10px;
width: 300px;
}
#f3 {
display: inline;
text-align: left;
float:left;
position: relative;
width: 300px;
margin-top: 10px;
}
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. 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? Hi, I'm having an issue with Firefox displaying my home page correctly. It previews smaller than other pages in my site even though they all share the same style sheet. In IE 7 my site previews fine, the issue is with Firefox for some reason the wrapper seems to shrink on the home page and any help or tips to steer me the right way would be greatly appreciated, thanks. Code: <---Style sheet---->
body {
margin: 0;
padding: 0;
background-image: url(assests/wrapperimage.jpg);
background-attachment: fixed;
}
p {
color: #FFFFFF;
font-family: "Courier New", Courier, monospace;
line-height: 20px;
letter-spacing: 2px;
font-size: 12px;
margin-top: 0;
margin-bottom: 0px;
}
h1 {
font-size: 2.4em;
color: #00FF00;
border-bottom-width: thin;
border-bottom-color: #00FF00;
border-bottom-style: dashed;
margin-top: 40px;
text-align: center;
}
h2 {
font-size: 20px;
color: #CCFF66;
text-align: center;
}
#wrapper {
width: 800px;
height: 1150px;
border-right: 2px solid #00FF00;
border-left: 2px solid #00FF00;
border-bottom: #000000 10px;
margin-right: auto;
margin-left: auto;
background: #000000;
}
#banner {
height: 250px;
width: 800px;
}
#sidebar {
float: left;
width: 190px;
height: 500px;
margin-top: 60px;
margin-left: 10px;
margin-bottom: 60px;
padding-left: 10px;
color: #FFFFFF;
text-align: center;
border-color: #999999;
border-style: thin;
}
#sidebar li {
list-style: none;
background-image: url(assests/images/images/images/check.jpg);
background-repeat: no-repeat;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 6px;
text-align: left;
}
#main {
float:right;
width: 500px;
padding: 5px;
}
ul.nav {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left: 50px;
padding-left: 0px;
list-style: none;
float: left;
width: 750px;
letter-spacing: 3px;
}
ul.nav li {
float: left;
padding-left: 10px;
margin-left: 15px;
margin-right: 10px;
}
ul.nav a {
display: block;
padding-left: 15px;
padding-right: 5px;
margin-left: 10px;
margin-right: 5px;
background-color: #000000;
text-decoration: none;
color: #00FF00;
text-align: center;
}
ul.nav a:hover {
background-image: url(assests/images/images/images/check.jpg);
background-position: left;
background-repeat: no-repeat;
padding-right: 10px;
color: #FFFFFF;
}
</style>
<----Home page HTML---->
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="banner">
<img src="assests/images/starbanner.jpg" />
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About us?</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<div id="sidebar">
<h2>Why have a website?</h2>
<p>In todays market having a business or being a professional can cost thousands of dollars and you could be missing out on siginificantly increasing revenues. The internet is low cost method of marketing that yields results with the proper planning, marketing and implemnation.
Taking advantage of the internet in your overall marketing plan is essential in today's market for your company to grow and remain competitve.
Take a look at our portfolio to see some of the work we've done or contact us today to schedule a no-obligation free consultation.</p>
<p>
</p>
</div>
<div id="main">
<h1>Web Design Studio</h1>
<p>star media is a web design studio located in Troy, Michigan. Our specialty is providing afforadable and customized web design services as well as graphic design and print services. With our competitve pricing and custom tailored marketing programs we will drive customers to your website and through your business doors. Our competitive pricing and quick turn around time in developing websites ensures you have your website up and running as quickly as possible without breaking the bank.
From basic and simple websites to high caliber e-commerce database driven websites Gstar media does it all.
<h2>Why have a website?</h2>
<p>In todays market having a business or being a professional can cost thousands of dollars and you could be missing out on siginificantly increasing revenues. The internet is low cost method of marketing that yields results with the proper planning, marketing and implemnation.
Taking advantage of the internet in your overall marketing plan is essential in today's market for your company to grow and remain competitve.
Take a look at our portfolio to see some of the work we've done or contact us today to schedule a no-obligation free consultation.</p>
</div>
</div>
</body>
</body>
</html>
<-------About US HTML------>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="banner">
<img src="assests/images/starbanner.jpg" />
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<div id="sidebar">
<h2>We offer:</h2>
<ul>
<li>web design</li>
<li>web hosting</li>
<li>e-commerce</li>
<li>logo design</li>
<li>business card design</li>
<li>flyer design</li>
<li>customized marketing campaigns</li>
<li>Search engine optimization</li>
<li>web maintence</li>
<li>illustration</li>
</ul>
</p>
</div>
<div id="main">
<h1>Our Promise.</h1>
<p>star media is created with the goal of providing affordable web design service to small business owners and professionals. I graduated from Sheridan college with a degree in business and later went on to get a degree in graphic design. With a strong background in business I understand how to market your business and message effectively to prospective customers that will help spread the awarness of your products and services in order to increase your revenues. I have a strong understanding of graphic design principles with a working knowledge of CSS/XHTML, Photoshop CS3, and Illustrator CS3.
</p>
</div>
</div>
</body>
</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 have two divs on a page and the last two are about 10 pixels higher up the screen than the last one. But if I adjust the window size they move back down where they should be. This only happens on of the pages though which is quite odd. Does anyone know of any firefox bugs that would cause this and any work-arounds? My website works fine with all browsers except IE. Can anyone help me with the issue? www.opennys.com It uses CSS and xHTML and PHP. Thanks, Dennis users.accesscomm.ca/kendemchuk/test/education_tmp.html preview in firefox and IE. Lines appear in IE but not firefox This is related to the display of a text box on mouseover. why ?? is there a better method ?? Can someone please help me, i am desparate to intergrate transparency into my forum but im finding out what a pain in the *** it is. I tried semi transparent png's, but they only work in firefox and IE7 but most people are using IE6 (42.3%). I looked around on the internet for a fix that solves the ie6 png transparency issue but i didnt find one that shows it as semi transparent and doesnt bugger all of the links. Now ive moved onto CSS, ive found a solution that works great for IE 6 + 7 but not firefox. What happens is i apply a transparent css to the pagebackground: Code: filter:alpha(opacity=50); opacity: 0.5; but it applies it to everything on top as well. To get around this i apply a non transparent css to everything on top: Code: filter:alpha(opacity=100); opacity: 1; This works fine in IE making the background transparent and the contents on top solid but in firefox everything (including the content and the background) is transparent. Is there anything i can do to get around this? Its getting really annoying! Any help you can give would be much appreciated. James 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. 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! 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 built a website and its rendering one way in firefox and another in IE. I want it to display just the way Firefox has it. However, IE keeps messing up the padding and the whole layout is destroyed. Can anyone look at my code and tell me where I am going wrong? Please can someone tell me what I must do to get the code working in both IE and Firefox. 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 |
|||||||