|
CSS - Mysterious Gap In Firefox???
Please poke around this site -
http://swansonre.tmhdesign.com/home-payment-calculator.asp See the main content area (in white). It should butt up to the green navigation area but instead I get a gap for some reason or another. I've dissected this page up and down, left and right, but can't find what is causing the issue. If you browse some other pages you will see they are just fine. Thanks so much. T Similar TutorialsUm... OK so I wrote a post asking if anybody knew why something was displaying incorrectly on my site, but due to forum rules I wasn't allowed to include any links. So how can I show you the problem if I can't show you? Also, the link saying "see forum rules for more information" didn't have any more information. Like, how many posts until I can ask for help and actually show what the problem is? I have a region with a div, an image and another div stacked vertically. For some reason, there are a few pixels of blank space between the image and the bottom div. http://www.brucethorn.com/index.php...maritime-sunday On another page, I have regions with a "line-height + vertical-align:middle" centering of an image that make up thumb nails. There too is a few pixels of blank space, but at the top and images, pushing them down and slightly outside of the div that contains each of them. http://www.brucethorn.com/index.php/paintings I suspect these are the same problem, but I could be wrong. The issue is most visable in FF, and noticable in Opera. I only see something sporadic for the second occurence in IE Code: body {background-color:#999999; margin:0px; padding:0px; border:0px; text-align:center; font-family:"Courier New", Courier, mono;}
h1.header {height:16px; width:800px; _width:776px; font-size:100%; font-weight:bold; margin:0px 0px 0px 24px; text-align:left; background-color:#333333;}
h2.header {margin:0px; font-size:90%; font-weight:bold;}
div {text-align:left;}
h2.infoleft {text-align:left; height:16px; width:576px; font-size:90%; margin:0px 0px 0px 24px; _margin:0px 0px 0px 12px;float:left;}
h2.inforight {text-align:right; height:16px; width:176px; font-size:90%; margin:0px 24px 0px 0px; _margin:0px 0px 0px 0px;float:left;}
div.black {background-color:#000000; color:#999999;}
div.block {margin:8px 24px 8px 24px; text-align:justify; font-size:90%;}
div.block2 {margin:8px 0px 8px 12px; _margin:0px 0px 0px 4px;}
div.block3 {margin:8px 0px 0px 12px;}
img {border:0px; margin:0px; padding:0px;}
img.left {float:left;}
img.right {float:right;}
div.bar {height:16px; width:auto; text-align:center;}
div.title {height:48px; width:800px; margin:auto;}
div.content {height:392px; width:800px; margin:auto; text-align:center;}
div.subbar {height:16px; width:800px; background-color:#333333;}
div.menu {height:18px; width:480px; float:left; margin:30px 0px 0px 20px;}
div.copyright {height:16px; width:800px; margin:auto; text-align:right; font-weight:bold; font-size:75%;}
div.scroll {height:344px; width:800px; margin:8px 0px 0px 0px; overflow:auto;}
div.filmunit {height:128px; width:128px; border:4px; border-style:solid; border-color:#000000; background-color:#999999; margin:8px; padding:0px; float:left; text-align:center; line-height:128px;}
img.filmimage {vertical-align:middle;}
So this is my first time every going this in-depth with creating a website from scratch simply using CSS. So far with the help of many tutorials it's been really great. However, shortly after adding my layout to my code a problem arose. For a while it was okay. I started creating different containers and parts of the page. But then after one save this bar magically appeared. After ctrl-z'ing as far as I could and refreshing I could not find the problem. Here is a picture of the bar above the page: http://tinypic.com/r/124zv47/7 Here's the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
/*Currently not in use*/
.className {
position: absolute;
top: 0px;
left: 0px;
}
/*Surrounding background cover*/
#outside_container {
background: url(Slice.jpg);
background-repeat: repeat-x;
background-color: #000;
min-height: 900px;
}
/*Actual background*/
#container {
background: url(Complete_Layout.jpg);
background-repeat: no-repeat;
background-position: center;
min-height: 900px;
}
/*Future sidebar*/
ul#navigationmenu {
text-decoration: none;
}
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="outside_container">
<div id="container">
<ul id="navigationmenu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Competitions</a></li>
<li><a href="#">Blog/Updates</a></li>
</ul>
</div>
</div>
</body>
</html>
I just don't understand IE... something that should work just doesnt, and then it works fine on another page.... for example... Scroll Over The Staff Links at the very bottom You will notice that the black background disappears when viewed in IE... but take a look at the code isolated in IE and it looks perfect... Hi, folks. I'm having a curious problem with the navigation on my page. I'd like the nav and header to be all on the same line. It works when I just include the nav icons as images directly in the HTML. But when I make the nav icons into links, set each link to display:block, and give it the appropriate background-image, it puts all the icons on a new line. I'm not sure why. Any ideas? You can see the page with the problem and the effect I'm trying to achieve at these two TinyURLs: Problem: TinyURL dotcomslash a8qnky Working: TinyURL dotcomslash 8tj29l (The HTML validates, and the CSS validates except for the IE PNG transparency fix. I'm still experiencing this problem without that fix in place.) Hi folks, my website section "www(dot)mail(dot)tssma(dot)net" has an extra blue bar at the bottom of the page even though i specifically set it to 900 with the following css. I actually dont know why its blue either. Code:
body
{
background-image: url('http://www.tssma.net/templates/renrentemplate/images/Page-BgSimpleGradient.jpg');
top:0;
width: 100%;
height: 900px;
Not only that i cant seem to change the Username and Password input which is currently grey, to black using the css. Help will be greatly appreciated EDIT: Hahah yay, i somehow got rid of the bar on the bottom just need help with the grey input fonts. I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? 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. 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>
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 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 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 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 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 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 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? 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 ?? |
|||||||