CSS - Odd Float Behaviour In Ie7

Hi,

I am trying to finish up on this cubecart re-skinning that I've been left with.

Basically, when you add products to the basket the style goes really long. It seems to work in ie7's compatibilty mode, but other than that I am at a bit of a lose as to why its doing it.

I am not much of a front end developer, so its all a bit foriegn. I can make my way around a css file, but this has me stumped as I cant see what is causing this!

Any help would be greatly appriciated.

The page is located at:

keylow-design.com/shop

Thanks in advance

Robert

Hello All,

I have created a grid using divs. There is a main div acting as a table, this contains divs acting as rows and these contain divs acting as cells. The finished thing resembles an HTML table.

When developing the grid, I managed to make it work correctly in all browsers and was happy with the result. Now that I have put the grid on a live server and there is a slight lag loading the page, I am having problems in FF3 and IE7.

When I first view the page, the divs are not sitting in a nice block, some of the rows end halfway through and new rows are started. If however I click refresh, the problem fixes itself. Also the alignment is random, I can view the same page twice in the same browser and get different results.

The first thing I thought was that there must be something wrong with my coding, but the HTML and CSS never change.

I cannot send a link to the page as it is on an intranet, also the code is quite long so I did not include it but I will if necessary.

I have looked around on the net for similar problems and have found one or two mentions but no solutions.

Has anyone else had a problem like this and solved it? Any help would very much be appreciated.

Thank you,

Aaron.

I have a basic 2 column layout with a header and the columns reprezented by two floated divs but on IE I'm experiencing some weird behaviour with the menu. To be precise the menu's background and content is not showing up at pageload and I have to hover some of it's elements or resize the window, or bring another window above IE's window and then the hidden elements magically appear. Is this some common bug? And more important: is there a fix?

You can see my example at the following link -> http://www.link7.ro/misc/css-stuff/bug1/test.html

Thanks in advance.

I thought that setting properties for a and a:hover like this:

PHP Code:
 a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #960000;
    text-decoration: none;
    border-bottom: 1px dashed #960000;
}
a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px dashed #FFFFFF;
} 





would apply a dashed bottom border to a standard link (which it does, marvellously). I also thought any other a classes would override this. Such as:

PHP Code:
 a.nav {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #960000;
}
a.nav:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
} 





Which doesn't work (until I set a border-bottom property of 0). Is there a way to get around this so I don't have to set a 0 bottom-border on all other link types?

Hi, im making a site for a friend but cant seem to understand why the css works fine on one page and the exact same css fails on another.

CSS:
Code:

#topmenu_wow {
	background-image: url(images/wow_menu.png);
	height: 73px;
	width: 1030px;
	display: block;
	background-repeat: no-repeat;
	position: relative;
	margin-right: auto;
	margin-left: auto;
}
#topmenu_war {
	background-image: url(images/war_menu.png);
	height: 73px;
	width: 1030px;
	display: block;
	background-repeat: no-repeat;
	position: relative;
	margin-right: auto;
	margin-left: auto;
}
#menupos {
	top: 15px;
	position: relative;
	
}

html for the menu:
Code:

<div id="topmenu_war"><!--this is the one row im changing, topmenu_war (not working) or topmenu_wow (working)-->
<span id="home"><a href="index.html"><span id="menupos">Home</span></a></span>
<span id="info"><a href="info.html"><span id="menupos">Info</span></a></span>
<span id="demo"><a href="demo.html"><span id="menupos">Demo</span></a></span>
<a href="#"><span></span></a>
<span id="pricing"><a href="pricing.html"><span id="menupos">Pricing</span></a></span>
<span id="order"><a href="order.html"><span id="menupos">Order</span></a></span>
<span id="support"><a href="support.html"><span id="menupos">Support</span></a></span></div>

The working page
The bugged page

I've tried to put each file in a own folder with a own css (eg /wow/index.html) but no luck.
Any help is welcome!

Regards - mrsarun

Hi all,

I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage:

http://www.houseofhawkins.com/index.html

which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text.

They are links with the following CSS attached:

div#Header #MenuSection a.MenuTab {

PHP Code:
 filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0');
    font-weight: bold;
    text-align: center;
    font-size: 1.3em;
    background-color: #BCD6BC;
    border-style: solid;
    border-width: 1px;
    border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5;
    margin: 0 5px 0 2px;
    height: 1.5em;
    width: 140px;    
    padding: 5px 1px 1px 1px;
}

div#Header #MenuSection {
    float:left;
    margin-top: 30px;
} 





here is the HTML code for that part of the page.

PHP Code:
<div ID="MenuSection">
                    <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a>
                    <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a>
                    <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a>
                </div>
            <div style="clear:left"> </div> 





I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work!

I wish to understand why its like this... I have attached the CSS and the file if that helps anyone.

Thanks for the help and advice.

Hi all,

I have the following div definition:

Code:

.adddet {
	position:absolute;
	top:50px;
	width:450px;
	right:5px;
	padding:5px;
	border:1px solid black;
	background:white;
}

in my stylesheet.css and the following block of code in my php script:

Code:

<a name='details'>
<div class='adddet'>
<b>Your details:</b><br><br>
<form name=login action='newcart.php#details' method=post>
E-mail address: <input type=text name=email> 
<input type=submit name=act value='I am a new customer'><br>
I am a returning customer and my password is: <input type=password name=pass> 
<input type=submit name=act value='Go'></form> <small><a href='javascript:showrem();'>Forgot password?</a></small>
</div>

What I want is for the link 'Forgot your password?' to appear next to the 'Go' button at the bottom of the div. This is does if it's just plain text without the anchor tags. As soon as I add the anchor tags (as above) the text leaps to the top of the div in (seemingly) it's own box with a 1px black border around it.

To see a demonstration, have a look at www.pennymead.com/demo.php
Full source for the above page is below:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<a name='details'><div class='adddet'>
<b>Your details:</b><br><br>
<form name=login action='#' method=post>
E-mail address: <input type=text name=email> <input type=submit name=act value='I am a new customer'><br>I am a returning customer and my password is: <input type=password name=pass> <input type=submit name=act value='Go'></form> <small><a href='javascript:showrem();'>Forgot password?</a></small>
</div>
</body>
</html>

One final note is that this only seems to happen in Internet Explorer, certainly Google Chrome shows the text in the expected position.

Many thanks in advance for any help you can give with this.

Regards,

vsource.

I am currently developing a website, on which I overlay a copyright message onto images with 50% opacity for the message, using the following CSS:

Code:

.message{
	width:100%;
	text-align:center;
	z-index:5;
	color:#33FFFF;
	margin:0px;
	padding:0px;
	position:relative;
	top:-18px;
	background-color:#000;
	opacity:.50; filter:alpha(opacity=50); -moz-opacity:0.50;
}

This works fine, and gives me exactly the result I want.

HOWEVER, now I want to overlay an absolutely positioned div for a pop-up form. Where this overlays the semi-opaque region, In IE7 the semi-opaque region is visble, as if it had a higher z-index. It works fine in FireFox Chrome and Opera

Any ideas ?

Hello,

I am experincing something strange with a basic table enclosed in my content div...

The situation: I have basic layout, a header with 2 columns. The main content div holds the left hand side of the page and all works well... except the table. It shoots off the screen and a horizontal scroll bar apears and the table aligns up next to the far left div when viewed in Firefox, but aligns properly when viewed in IE 6.
If I enclose the table in a paragraph tag, it displays properly but then fails XHTML validation stating that I have enclosed a block element within a line element.
I have gone over and over the table tags, and all seems correct... went to the w3c and mimicked their sample table and have gotten the same prob. Has anyone else experinced this?? DIscovered any solutions?? Help! Thanks.

edit... here is the code:

the CSS portion:

#header {
color: #a47716;
border-top: .1px solid #e5eca9;
margin: 0;
padding: 0;
height: 100px;
background: #ccdd99 url("./headerBG.png") repeat-x;
}
h1.header, h2.header {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
color: #a47716;
border-bottom: none;
}
#content {
padding: 40px 10px 10px 10px;
background: #fff;
margin: 0px 25% 20px 5px;
border-top: 2px groove #87c6ae;
border-right: 2px outset #87c6ae;
border-left: 2px groove #87c6ae;
width: 75%;
}
#rightCol {
margin: 0px;
position: absolute;
top: 140px;
width:20%;
right: 0;
padding: 30px 10px 10px 10px;
}
#footer {
margin: 0 25% 0 5px;
padding: 0;
text-align:center;
font-size:small;
}

The XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>the title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
@import allTheStyleSheets.css;
-->
</style>
</head>
<body>

<!-- begin page header -->
<div id="header">
<?php include('./incHeader.php')?>
</div>
<!-- end page header -->

<!-- begin tab menu -->
<div id="tabMenu">
<?php include('./incNav.php')?>
</div>
<!-- end tab menu -->

<!-- begin main content -->
<div id="content">
<table summary="A summary.">
<caption> The Caption</caption>
<tr>
<th id="topic">Topic</th>
<th id="issue">Issue</th>
<th id="action">Action</th>
</tr>
<tr>
<td headers="topic"><h3>Heading</h3>
<p><a href="http://murphyzone.no-ip.com/GCCBFM/news/blog/index.php?p=10">Comment</a></p></td>
<td headers="issue">cell content</td>
<td headers="action">cell content</td>
</tr>
<tr>
<td headers="topic"><h3>Heading</h3></td>
<td headers="issue">cell content</td>
<td headers="action"> cell content</td>
</tr>
<tr>
<td headers="topic"><h3>Heading</h3></td>
<td headers="issue">cell content</td>
<td headers="action">cell content</td>
</tr>
<tr>
<td headers="topic">cell content</td>
<td headers="issue">cell content</td>
<td headers="action">cell content</td>
</tr>
<tr>
<td headers="topic"><h3>Heading</h3></td>
<td headers="issue">cell content</td>
<td headers="action"> cell content</td>
</tr>
<tr>
<td headers="topic"><h3>Heading</h3></td>
<td headers="issue">cell content</td>
<td headers="action"> cell content</td>
</tr>
<tr>
<td headers="topic"><h3>Heading</h3></td>
<td headers="issue">cell content</td>
<td headers="action"> cell content</td>
</tr>
<tr>
<td headers="topic"><h3>Heading</h3></td>
<td headers="issue">cell content</td>
<td headers="action">cell content</td>
</tr>
</table>
</div>
<!-- end main content -->

<!-- begin right column -->
<div id="rightCol">
the right column...
</div>
<!-- end right column -->

<!-- begin footer -->
<div id="footer">
<?php include('./incFooter.php')?>
</div>
<!-- end footer -->

</body>
</html>


Thanks again.

discovered whilst working on asp where i use '' for comments and tried to comment out a line in the css file the same way... this should technically work by breaking the whitespace and create an invalid rule but IE yet again responded differently...

Code:

	""item:attribute;
	''item:attribute;
	//item:attribute;

ignored by

opera 7.54
netscap 7.02
firefox 1.0.4

read by

IE 5.01
IE 5.5
IE 6.0

	"item:attribute;"
	'item:attribute;'

ignored by

all

read by

IE 5.01

interested to see how the mac browsers respond but it looks like a better IE5.0 inline filter than

Code:

_item /**/: /**/attribute;

!

I can't get this page right.

http://ortho-paloalto.hoozhosting.c...te/newsite.html

What I'm trying to do is create a menu at the top in the center #window div. If I add width: 25% to the following, the menu is properly spaced in IE, but block atributes are lost in FF. If I remove the width: 25% from the following the menu is spaced properly in FF, but lost in IE.

#submenu li a { }

#submenu li a:hover { }


Regardless of the same size tabs for the menu's described above the links stopped working in FF. I'm trying to have the menu at the top be width: 33% and the sub menu 25% and both centered. Eventually I'd like to determine a way to customize each of the menu color's but I think the formatting and placement is more important at this point.

Please help, I've just recently started using css and have limited experience. Any help is appreciated.

Thank you,
Dave

Hi,

I'm noticing a different behaviour between firefox and explorer regarding de margin attribute, and I can't explain it applying the well known box model difference.

Here is the css code:

Code:

div#main {
	margin: 10px auto 20px auto;
	width: 1001px;
	border: 1px solid #000000;
	}

div#left {
	float: left;
	width: 150px;
	}

div#content {
	width: 600px;
	margin-left: 160px;
	background-color:#0033CC;
	}

Here is the HTML:

Code:

<div id="main">
	<div id="left">left</div>
	<div id="content">content</div>
</div>

What I get in firefox is the expected, the content div is exactly at 160px distance of the inner part of the main div border.

However in explorer the distance is 163px?? According to the box model difference, if we consider that in explorer the width includes the border, the distance should be 161px but not 163px.

Any ideas?

Caste

Hey everyone,

I ran into an odd problem, I've implemented a workaround and got the desired result but I'm still confused as to why the proper solution didn't work.

Here is what I was trying to do.

I'm working on a web based application and the previous coders were ****, which is why they're all gone now, there are soo many bugs that require entire rewrites that we're just hacking them away piece by piece. Anyway, one thing they do is instead of going to the database whenever they need information, they cache all of the information in the ASP engine for the page that is being loaded. As you can imagine this results in some long load times. So they implemented a loading screen. Basically they loaded an iframe with an src of about:blank and within it they had a div and some tables with gif images. And we wanted to see the page that the loading screen was called from with a transparent png image making everything seeming to be greyed out using a transparent png. What I did was set the iframe(class="shimFrame") allowtransparency=true and set .shimFrame body tag style property background-color:transparent; Once that was done I gave the loading div which was 100% height and width to have the transparent image background. It worked, but behind the image I still saw the iframe white background. I remove the iframe and everything works as I expected but I don't know why the iframe allowtransparency=true didn't do what I wanted it to do. Maybe I misunderstood what it does, I figured it would let you see past the iframe background and see the page that the iframe was a part of.

Anyone have any ideas? I don't know if this should be in css or html since it could be something missing from either. Also the web app is currently only supported under IE but in version 2 it will be properly designed(there are no design docs for this app) and it will be browser independent, since some of the clients we're looking to get currently require firefox for some of their other software. I'm more or less trying to find the reason why the possible proprietary property didn't work as documented.

hello! My name is Marco, I'm italian, I hope nobody will be hurted by my english.

Consider this code:
Code:

<html><head><style>

body
{
	text-align: center;
}

#wrap
{
	width: 100%;
	background: yellow;
	height: 400px;
}

#inside
{
	width: 800px;
	position: relative;
	margin: 0px auto;
	background: red;
}

</style></head><body>

	<div id='wrap'><div id='inside'>
		try to downsize the width of the window! what is the yellow background doing?
		try to downsize the width of the window! what is the yellow background doing?
		try to downsize the width of the window! what is the yellow background doing?
		try to downsize the width of the window! what is the yellow background doing?
		try to downsize the width of the window! what is the yellow background doing?
		try to downsize the width of the window! what is the yellow background doing?
		try to downsize the width of the window! what is the yellow background doing?
		try to downsize the width of the window! what is the yellow background doing?
		try to downsize the width of the window! what is the yellow background doing?
		try to downsize the width of the window! what is the yellow background doing?
		try to downsize the width of the window! what is the yellow background doing?
		try to downsize the width of the window! what is the yellow background doing?
		try to downsize the width of the window! what is the yellow background doing?
		try to downsize the width of the window! what is the yellow background doing?
		try to downsize the width of the window! what is the yellow background doing?
		try to downsize the width of the window! what is the yellow background doing?
		try to downsize the width of the window! what is the yellow background doing?
	</div></div>

</body></html>

if you try to downsize the width of the browser window (to 100px, for example) the yellow background will move to left

I hope the problem is clear exposed...thank you

Hey everyone,

I was trying to figure out what the default display properties for a div are. What I'm trying to figure it out for is because I want to be able to set up other elements to behave the same way. This way I don't have a zillion DIVs on my page. I could set it so that My header uses something like:
Code:
HTML

<body>
<h1 id="header">Header</h1>

This way I could use CSS to cause it to span the full width of the page and behave the way I'm used to having things behave.
I think it might just be a width:100% but I can't find anything on it. But if I remember correctly you have to set a DIV to display:block to be able to define a width.