CSS - Strange Link Behavior In Firefox 3

Hello there. I'm afraid I can't provide a live example because it's a complicated commission that hasn't yet been published, but I'll try to be as specific and detailed as possible.

My overall aim: To have a squarish div on the left hand side and a few short rectangular divs vertically stacked on the right hand side of a container. The container is a div whose width is known. The stacked rectangles must have a minimum width but there is some margin for error. All these divs are separated by margins.

Code:

OOOO  ===
OOOO 
OOOO  ===
OOOO
OOOO  ===

There are other, unrelated blocks above and below this arrangement, and there are blocks nested within these divs as well, all unrelated though.

So how did I implement this? I figured this was simple enough:

Code:

<div>
  ...
  <div class="left-square">...</div>
  <div class="right-short-rectangle">...</div>
  <div class="right-short-rectangle">...</div>
  <div class="right-short-rectangle">...</div>
  ...
</div>

And the CSS would then look something like this:

Code:

.left-square {
  width: 100px;
  height: ...px;
  float: left;
}

.right-short-rectangle {
  margin-left: 110px;
  margin-bottom: 5px;
  height: ...px;
}

So, this works just fine in Firefox and Internet Explorer. However, for some reason, Chrome doesn't like it. What Chrome does is, it completely ignores the margin on the right-short-rectangles, placing them underneath the floating left-square, but giving them the correct width (the width of the container minus the margin).

By fooling around with the DOM inspector, I discovered that if I remove the margin attribute from one of the rectangles, they show correctly (in Chrome). However, they obviously will break in Firefox and Internet Explorer if I do that. Also, if I remove the float attribute from the square, Chrome suddenly recognizes the margins of the rectangles properly (when it no longer matters).

So, does anyone have any idea about what's going on here?

EDIT: I just noticed this and it is certainly relevant: The right-short-rectangles contain a few *unstyled* divs and one div that is floated to the RIGHT (in other words, content I want to have on the right hand side of each of these rectangles). Without this inner, right-floated div, the margin issue no longer happens in Chrome. The inner div is, however, essential. What can I do? Use tables?

I haven't seen this one before. And I can't for the life of me figure out what could be causing this.
Take a look at This Page
To see what I'm talking about, you'll need to view it in a good browser first (Mozilla, Netscape, Opera) Then look in IE.
Basically there's an H3 that also serves as a link to my RSS Feed page.
You don't see it in IE unless you actually hover the mouse over it. Even then, if you move the mouse over the menu on the left, the heading disapears again. At first I thought it could be because it was a heading, but on another page a regular link does it too.
I've got two stylesheets, and it does it on both.
Any thoughts or suggestions?
Here's the main stylesheet

Hi all,

I'm building my first experimental CSS site, and I'm trying to attain accessibility for the widest array of users. While testing various browser settings, I came across this issue.

(I'm looking at the site in IE, as I'm at work. I'll be able to look it over in other browsers when I get home.)

When my site is viewed with text set to "Medium," everything appears fine:

http://www.flickr.com/photos/251449...in/photostream/

When my site is viewed with text set to "Larger," the text in the middle left section doesn't fit:

http://www.flickr.com/photos/251449...in/photostream/

Fair enough. But here's what has me stumped: when the site is viewed with the text set to "Largest," it fits again:

http://www.flickr.com/photos/25144998@N00/4997174984/

I've learned alot very quickly in the last week or so, but this really has me over a barrel. Any ideas?

CSS

Code:

body
{
background-color: #393939;
font-family: sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}

.header
{
text-align: right;
font-weight: bold;
font-size: 1.6em;
}

.clickables
{
text-align: right;
font-weight: bold;
font-size: 0.95em;
}

.content
{
text-align: right;
font-size: .8em;
}

.navbutton
{
float: right;
width: 5em;
background-color: #ffcc00;
color: #666666;
height: 1em;
text-align: right;
font-weight: bold;
font-size: 0.95em;
margin: .75em 0.2em .75em 0em;
}

#mother
{
margin-left: auto;
margin-right: auto;
min-width: 720px;
max-width: 1000px;
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
width:expression(document.body.clientWidth < 500? "500px": "auto" );
}

#UpperLeftWrapper
{
float: left;
width: 35%;
background-color: #7d7d7d;
}

#UpperLeft
{
height: 8em;
margin: 0;
background-color: #7d7d7d;
}

#UpperRightWrapper
{
float: right;
width: 65%;
background-color: #666666;
}

#UpperRight
{
float: right;
width: 7em;
height: 7em;
margin: 0;
padding: .5em;
background-color: #666666;
color: #ffcc00;
}

#MiddleLeftWrapper
{
float: left;
width: 35%;
background-color: #ffd426;
}

#MiddleLeft
{
float: right;
width: 8em;
height: 1.2em;
color: #7d7d7d;
background-color: #ffd426;
margin: 0;
padding: 0.6em;
}

#MiddleRightWrapper
{
float: left;
width: 65%;
background-color: #ffcc00;
}

#MiddleRight
{
float: right;
width: 24.85em;
height: 2.45em;
background-color: #ffcc00;
margin: 0em .6em 0em 0em;
}

#LowerLeftWrapper
{
float: left;
width: 35%;
background-color: #e5e5e5;
}

#LowerLeft
{
float: right;
width: 5.8em;
height: 75em;
color: #7d7d7d;
background-color: #e5e5e5;
padding: 0.7em;
}

#LowerRightWrapper
{
float: left;
width: 65%;
background-color: #ffffff;
}

#LowerRight
{
float: right;
height: 88em;
color: #666666;
background-color: #ffffff;
padding: 0.8em 1.1em 2em 2em;
}

HTML

Code:

<!DOCTYPE html>
<HTML>
<HEAD>
<META CHARSET="UTF-8">
<title>layout three</title>
<link rel="stylesheet" type="text/css" href="comp.css" />
</HEAD>
<BODY>
<div id="mother">

	<div id="UpperLeftWrapper">
		<div id="UpperLeft" class="header">
		</div>
	</div>
	<div id="UpperRightWrapper">
		<div id="UpperRight" class="header">
		<p>demonstration<br>layout<br>number two</p> 
		</div>
	</div>

		
	<div id="MiddleLeftWrapper">
		<div id="MiddleLeft">
		  <div class="clickables">
		  <p>additional reading</p>
		  </div>
		</div>
	</div>
	<div id="MiddleRightWrapper">
		<div id="MiddleRight">
		  <div class="navbutton">
		  <p>tab one</p>
		  </div>		  
		  <div class="navbutton">
		  <p>tab two</p>
		  </div>
		  <div class="navbutton">
		  <p>tab three</p>
		  </div>
		  <div class="navbutton">
		  <p>tab four</p>
		  </div>
		  <div class="navbutton">
		  <p>tab five</p>
		  </div>
		</div>
	</div>

	<div id="LowerLeftWrapper">
		<div id="LowerLeft" class="clickables">
		  <p>
		  first link<br>
		  second link<br>
		  third link<br>
		  fourth link<br>
		  fifth link<br>
		  sixth link<br>
		  seventh link<br>
		  eighth link<br>
		  </p>	
		</div>
	</div>
	<div id="LowerRightWrapper">
		<div id="LowerRight" class="content">
		  <p>
		  Body content here...
		  </p>
		</div>
	</div>

</div>
</BODY>
</HTML>

Thanks in advance for any advice!

This pertains to the "last nail in the coffin" so to speak in cross-browser compatability with the template for this site.

The template is at http://www.spearsphotography.com/test_index.html

The effect in question is on paragraph tags in the news item elements under the pagebody id div. (e.g., #pageblock div.story p ).

Essentially, in every browser -except- IE Windows, the line spacing is as intended by the design. In IE6Win (haven't tested 5, but assume same) the lines are too-tight.

Can anyone see the problem here, or has experienced this before?

CSS File is at: http://www.spearsphotography.com/css/style.css

Thanks.

I have a big div container. In this container, I put my content - mostly text. I have a nested div in this container that floats a "sidebar" to the upper-left corner of the container. The sidebar is set up to allow text in the container to fill in around the bottom half of the side bar if the sidebar is shorter than the length of the container.

My problem occurs when I have an unordered list as part of my content. If I have an unordered list sitting to the right of the sidebar, the bullets of the list sit immidiately on the right the left of the sidebar (with no indenting). Below the sidebar, all bulleted lists starts indenting from the left of the container, as expected.

One solution would be to put my content in it's own div, that would be completely separate from the sidebar div. However, if I do this, my content won't fill in around the bottom of my sidebar.

Any advice? Thanks!
- Ryan

Hello,

I am having an issue with some background images. Ive finally decided on a method to create my rounded corners. I am using three divs, a top bottom and center content div.

The top and bottom divs have a background image for the top and bottom portions of the curved box. The center div contains the content and a background image repeating along the x-axis. Problem is, the image repeating stops just shy of the top and bottom images. Is there a way to solve this? When I place a border around the center div, the repeating image portion suddenly fills in the gaps, which I don't quite understand.

Here is a link to a development area where I am displaying the problem: http://www.ioforge.com/ezt-example/index.html

Hello to all,
I have a problem of compatibility when using Safari (V3).
I have a strange interface and i can't identify the problem. When I refresh my page,I don't have the same css !!!!
The same interface is testing wit hFirefox and IE and it's ok.
Can you help me please.
Thank you in advance for your time.

I've got two hidden maps which display in a div when the link is hovered. If I put an H3 inside the anchor to style the link text, it doesn't inherit the link and hover colors of the rest of the site. If I move the H3 outside the <a href> it breaks the hidden span stuff in Firefox. But the colors work! If I just use normal text it works fine but displays inline and small and crappy...

Here is my CSS for the div:
Code:

div#maplinks {margin:10px 0; padding:0;}
div#maplinks a span {display: none;}
div#maplinks a:hover span {display: block;
   position: absolute; top: 1em; left: 330px; width: 420px;
   padding: 0px; margin: 0px; z-index: 100;
   background: white;
   text-align: center;}

and the HTML
Code:

<div id="maplinks">
	<a href="images/sabah-map-400X319.jpg"><h3>&nbsp;View Sabah Map</h3><span><img class="centimg" src="images/sabah-map-400X319.jpg" width="400" height="319" border=0 alt="Sabah Map"><p class="credit">Sabah Tourism</p></span></a>
	<a href="images/borneo-map.gif">&nbsp;Map of Borneo and Region<span><img class="centimg" src="images/borneo-map.gif" width="420" height="330" border=0 alt="Borneo Map"><p class="credit">Expedia.com</p></span></a>
</div> <!-- maplinks -->

How would I address this <h3> element?
Or do I try to style that div's a:link and a:hover? (that didn't seem to work).

Hi!

Let's consider this XHTML: (I've put the CSS in a style attr. for conciseness)

[HTML]
<div style="width:100%;height:70px;background: #D10C23;display:block;">dfsdfdsfsd <img src="haha.gif" width="1000" height="50"></div>
[/HTML]

Now, if you make the browser window in FF or Opera less than 1000 pixels wide (a horizontal scrollbar appears), and scroll to the right, you'll see that the background color doesn't span until the end of the page. Why is this?

Thanks

I use tables as little as possible, and as such have very little experience of them with CSS - and I'm having a weird problem.

I wanted to create a table that has blocks of rows with their own 2px solid border, but with a 1px dotted border between cells. There are other rows between these blocks with no border at all. I've posted a very cut-down version of the page, including just the relevant part of the style sheet, at <http://www.highway57.co.uk/tests/tabletest>.

Because of an IE issue (of course! - see below) I ended up resorting to a fairly clumsy method: in the blocks referred to above, all the cells start with a 1px dotted border all round, then there are classes for t, r, b and l that have the corresponding border reset to 2px solid. As there are only two columns, every cell has either one or two of these classes applied. I'm using border-collapse: collapse.

This works fine in IE6, IE7, Opera (Mac and Win), Safari, OmniWeb and even Netscape 7.2 (Mac), but in the other Gecko browsers I have - Firefox and Camino - the table sprouts a superfluous vertical scrollbar which scrolls exactly 1 pixel. Rogue horizontal scrollbars I've dealt with before (usually a width issue), but I can't understand why I should get this vertical one, and it's driving me nuts - nothing I try gets rid of it.

OK, so why am I doing it this clumsy way? Originally I put each of the bordered blocks of rows in its own tbody, and applied borders to tds, trs or tbodys as appropriate, but neither IE6 nor IE7 appears to support borders on trs and tbodys - can anyone verify this? Nevertheless, I still got the scrollbar problem in Firefox: apart from the IEs, the visible result was exactly the same.

Any clues would be gratefully received!

Help! I've been holding my head on this one for a couple days.

I have a wordpress theme that works fine in IE7, but in Firefox the header and navigation aligns left instead of center. I have not tested in IE6 yet. I can't, for the life of me, figure out what's causing it.

Any help would be greatly appreciated!

www dot sccustomfacade dot com slash site


Thank you!

http://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 all

I'm working on the following XHTML/CSS2 page:

http://www.josh.ch/files/temp/strange_ff_effect

It's very clean XHTML and CSS2 in my opinion, and it's displayed correctly in Firefox, Opera and Safari.
However, I experience a very strange bug in Firefox2/OSX! When single clicking with the mouse somewhere on the white ground in the header area, all text on the page is selected! Try it! Click on the "Kanton Aargau" logo or anywhere in the same area, and tell me if you experience this, too.

I never had an error like this, and I have no idea what could cause the problem. Any ideas?

Thanks a lot
Josh

Let's say I have this code:

Code:

<a href="test.html">underline <span style="text-decoration: none">don't underline</span></a>

In IE this will not underline the span. In Opera 9 and Firefox 1.5 it will underline the span. Why? Any way to get around this?

Hi!

Having a problem again with firefox! On IE6 the links in the bottom news bar work fine, in firefox, only two of them work!

Its a little strange! Output at www.generating-sets.com

Validated the markup and the CSS and they validate fine! (apart from the buggy PHPSESSID issue and my use of marquee which is due to be removed shortly).

CSS below:


PHP Code:
 html {height:100%;}
body {
margin:0; padding:0; height:100%;
background-image:url(images/newback.jpg);
background-position:top right;
background-repeat:repeat-y;
background-color:#ffffff;
font-family: sans-serif; 
font-size: .7em;
}
#wrap {
background-image:url(images/newback150px.jpg);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
}
* html #wrap {height:100%}

div#navbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

div#formbox {
color: #000000;
padding: 2%;
border: #000044 solid 1px;
}
div.displaybox {
color: #000000;
padding: 2%;
margin: 1%;
border: #000044 solid 1px;
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;
font-size: 1.1em;
}
div#userbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

div#topleveladminbar {
padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px
}

#header {
background-color: #000044;
background-image:url(images/wel.jpg);
width: 100%;
background-repeat: repeat;
border-bottom: 2px #000000 solid;
color: #ffffff; 
margin:0; padding:0;
height:100px;
}


#left {
float:left;
width:149px;
background-image:url(images/newback.jpg);
background-repeat: repeat;
color: #ffffff; 
text-align:center;
background-color: #000044;
border-right: 1px #000000 solid; 
}
#main {
position:relative;
margin-left:200px;
}

#content {
text-align:center;
padding:4px;
margin-right:200px;
margin-bottom:160px;
text-align:left;
}

#clearfooter {
clear:both;
height:80px;
overflow:hidden;
}
#footer {
height:40px;
background-color: #000044;
border-top: 2px #000000 solid;
margin:0; padding:0;
background-image:url(images/newback.jpg);
background-repeat: repeat;
margin-top:-0px;
color: #ffffff; 
text-align:center;
}
div#newsbar {padding: 0%; 
text-align: left;
height:150px; 
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff;
margin-left: +150px;
margin-right: +10px; 
margin-top: -180px;
border: 2px #000000 solid;  
width: auto;} 

code {
font-size:0.8em;
border:1px solid navy;
background-color:white;
color:#333333;
padding:10px;
display:block;
width:80%;
margin:10px auto;
overflow:auto;
}

h1 {font-size: 1.4em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h2 {font-size: 1.3em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h3 {font-size: 1.2em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h4 {font-size: 1.1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h5 {font-size: 1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

a:link {color: #ffffff; 
text-decoration: underline;} 

a:visited { 
    color: #ffffff; 
    text-decoration: underline;}     

a:hover {color: #ffffff;
background-color: #0000FF;
text-decoration: underline;} 

.displaybox a:link {color: #0000FF; 
text-decoration: underline;} 

.displaybox a:visited { 
    color: #0000FF; 
    text-decoration: underline;}     

.displaybox a:hover {color: #000044;
background-color: #EEEEEE;
text-decoration: underline;}