CSS - Odd Centering Behavior In Ie 6 Win

I'm not extremely familiar with CSS, as I've only used a few simple implementations of it. Please move this if it's in the wrong place, but I was wondering if it was possible to alter the behavior of <a> tags so that when clicked, instead of loading the page specified in the src, it executes a JavaScript function, providing the src for a value. It seems to me that this would be done through CSS.

I could go through and replace each "src='src'" with "onClick='function(src)'", but there are far too many pages, each with far too many links, to edit. So it seems it would be easier to simply import a CSS style in each page that'll have the same effect. Any ideas?

I'm currently working on the CSS template for a new client and running into a strange issue.

The design calls for a separation bar of repeated background to resemble a negative strip (site is a portfolio piece for a commercial photographer), and below that the continuation of a gradation.

For some reason, however, in Mozilla-based browsers a gap (visually as if it was a top margin) is appearing in the background repeat (gradation) in the pageblock.

To see it, visit http://www.spearsphotography.com/test_index.html in Firefox or another Moz browser.

The strange thing is... I noticed the contained news items were not being pushed down (that is to say, it wasn't a margin issue). I tried changing the CSS definition of the background image position on the div, etc. Finally to see exactly where the browser was drawing the div, I set a 1px green border on #pageblock. Oddly enough it fixed it! (weird, huh?) This is especially strange since the float: right; div with the splash image -is- affected by the mysterious "margin".

You can see that by going to http://www.spearsphotography.com/test_index2.html. (Contains an inline style to add the border to #pageblock

The css file is at http://www.spearsphotography.com/css/style.css

I just don't get it. This was all coming together so quickly from the Photoshop mockups, and now a brick wall that is driving me mad.

Hi.
I have a nav bar on my site which I created using Suckerfish Dropdowns.
my <UL>-s id is "nav".

Everything is working when I hide secong level list by Css: Code:

ul ul{display:none;}

But when I change it to (so as to not hide all second level lists) Code:

ul#nav ul{display:none;}

,
the browser still hides the list, but didn't show it on hover! : Code:

li:hover ul, li.sfhover ul{
 display: block; 
 }

This behaviour seems very strange for me.
Can anyone explain me that?

The address of the page is http://www.dinal.ru/new/

Thank you.
Artashes

I have a very strange quirk going on with my development site right now. It's being developed locally so I can't provide a link to test with. However, I can describe the exact behavior.

When any browser is maximized, everything looks great.

If you size the browser, dragging any corner in any direction, again, the site looks great.

However if you hit the restore down button on any browser, the following occurs:

(Example)

Browser max is 1900 x 1080.
Browser 'restore down' is 1024x768.

When hitting restore down the site looks fine at first glance. However, if you drag the horizontal scroll bar down at the bottom of the browser to the right, a large white gap appears in place of the header, the menu, the body, the footer where the background should be.

(On the links below you will need to add an h t t p : / / to see the image issues I'm having. For some reason, I can't post any and it's really the only way I can show how this issue is occurring.

Here is what it looks like before dragging horizontal bar:
img21.imageshack.us/img21/2602/beforedrag.jpg

Here is the strange gap pictu
img31.imageshack.us/img31/6199/strangegap.jpg

Again, if I grab the corner of the browser itself and drag diagonally and resize, the background fills and stretches exactly the way it should.

Anyone have an idea of what might be causing it?

I'm using a div container as a wrapper:

div#container { text-align: center; margin: 0 auto; }

Header contains a flash file.

Menu contains:

background-image: url(/images/menu-background.gif);
background-repeat: repeat-x;

My main nav content is in a smaller container:

#nav-main {
position:inherit;
white-space:nowrap;
width:913px!important;
font-family:helvetica, sans-serif;
margin: auto auto!important;
}

Any ideas for what I need to do to fix this?

Many thanks.

Well strange on IE 5.2 for mac (I am assuming others are ficked too)
I have a div in which I want to put paragraphs in...
Code:

<html>
<head>
<style type="text/css">

#midRight		{	
					position:relative;
					top:20px;
					left:160px;	
					width:550px;
					padding:0px;
					margin:0px;
					border:1px solid black;
					
				}
				
</style>
</head>

<body>

<div id="midRight">
<p>line1</p>
<p>line2</p>
<p>line3</p>
<p>line4</p>
<p>line5</p>
</div>

</body>
</html>

Everything works fine on firefox (as one would expect) but on IE the first paragraph displays fine (at the left edge of the DIV) but all the rest indent themselves to the right by 160px (or whatever I change the left:xx px; of the div to. This is bizzare! I cant work out why the first one would be fine but all the rest indented. Anybody know how I can fix this?

(so IE looks like this)

Code:

line 1
                         line2
                         line3
                         line4
                         line5

etc

Okay I am trying my best to let go of HTML tables and move to the wonderful world of using CSS for layout. I continue to find that, although it may be an archaic way of doing things, most of the time using tables for layout is the quickest and most accurate way for me to get the job done.

Please don't hate, because I want to become more knowledgeable at using CSS!

So in my latest project I have a problem. I have a navigation bar that stretches always accross my page. In that navigation bar I have two primary things: on the left I have a menu section, and on the right I have a login section.

In the past I would have easily implemented the layout with tables, using something like this...

<table cellspacing="0" cellpadding="0" style="width:100%;">
<tr style="background-color: black;">
<td align="left">[stuff for my menu section]</td>
<td align="right">[stuff for my login section]</td>
</tr>
</table>

The end result would be a solid black navigation bar that would contain the stuff for the menu section on the left and the stuff for the login section on the right. Each would sit inside and flush against its respective side of the containing solid black navigation bar. Also, this navigation bar would automatically adjust its height to contain both sections, no matter how tall. Pretty simple stuff, right?

So now I am trying my best to figure out how to do this with CSS. At this point I have only a very crude understanding of how CSS and divs work in layouts.

I started out by making a container div...

<div id="NavigationBar" style="background-color:black;">
</div>

...then I embedded a div for each section...

<div id="NavigationBar" style="background-color:black;">
<div id="MenuSection">
[stuff for menu section]
</div>
<div id="LoginSection">
[stuff for login section]
</div>
</div>

...When I ran the page I quickly noticed the output was quite different than what I expected. It showed my black navigation bar, but it stacked the login section along the left side and just under the menu section.

So after some reading I discovered I should be able to solve the problem by assigning 'float:left' to the menu section div and 'float:right' to the login section div. And so I did.

While this did cause each to appear in the correct location (menu section on the left, login section on the right), it also had an undesirable effect.

Each section, after attachment of the 'float' styles, was no longer contained in the parent div. As a result each no longer contained the background color of the parent.

And so now, while I have a partial solution, I am still left wondering what I should do to continue on and solve this issue.

What I really need is for each section to be *contained* within the parent div and also use its background color, while also aligning properly to the left or right sides of the parent div.

In other words, I want the black background color of the navigation bar to be shown behind my menu and login sections. And if my menu should render at 40 pixels high, 300 pixels high...whatever, the containing parent div should adjust to contain it, just like an HTML table would.

For me, setting 'height' values for the parent div (essentialy in the background) and then using 'float' styles is not a good solution. What if the menu is rendered using a different font and thus changes heights? And even more important, what if a user does not view the page in standard 96DPI mode?

In either case the rendered heights of the menu and login sections could change. If I were using tables this would not be a problem; the table would simply adjust to the needed height, no matter what.

How can I get the same effect when using CSS and divs?

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!

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).

I have two column divs in my main div. They have the same margin setting but the second one mainright seems to be ignoring it... and both have width tags (that's doing something).
(URL address blocked: See forum rules)
and (URL address blocked: See forum rules)
my wrapper has a min-width of 780px
Is it margin doubling?

when i took the border and margin out of the mainleft div, it slammed to the wall of the container div. is there a hack for this? i want my 2 columns to have identical alignment...
Code:

#left {
	float:left;
	width:230px;
	text-align:left;
	font-size: 12px;	border:1px solid red;
}
#left p {/*	margin:10px;*/	padding:0;}	

#main {
	position:relative;margin-right:100px;
	text-align:left;
}
#main h1,h2,h3,h4 {margin:0; padding:0; display:inline;}
#main p {margin:5px; padding-left:5px;}
#mainleft {
	margin:5px;
	float:left;
	width:250px;
	border:1px solid red;
	text-align:left;
}	
#mainright {
	margin:5px;
	padding:5px;
/**/	position:relative;
/* float:right; only made it float right but still below the left */
	text-align:left;
	margin-left:490px;
		width:250px;
	border:1px solid red;
}
/*******  THE HTML  *********/
<div id="left">
	<div class="prop"></div>
<!-- the old createnavbar could go here or a photo -->
	<?php include 'leftcol.php' ?>
	<div class="clear"></div>
</div><!-- left -->
<div id="main">
	<div id="mainleft">
	 <h4>News</h4><br />
  	<p>copy.......</p>
  </div><!-- mainleft -->
  <div id="mainright">
  <h4>Features</h4><br />
  Many are free; Some have value.<p>&nbsp; </p>
  <ul>
  	<li>bunch of stufff</li>
	</ul>
	</div><!-- mainright -->
</div><!-- main -->

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!

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

OK, this is a new one to me. I'm building my first CSS-only site, and am quite happy with the way it's going, but have discovered something quite odd today.

When viewed with IE, the browser handles text selection VERY oddly, not allowing users to highlight a block of text to, say, copy to the clipboard. Try it yourself:

http://www.theatrebayarea.org/v2/

Any idea what this is about? It's not a huge bug, but I'd like to be able to fix it. Needless to say, non-IE browsers handle it fine.

-D

I'm new here, but am hoping someone might have an answer to my question...

I'm working to develop a site that displays press clippings for a company. The heavy lifting is done using PHP, but CSS is used for the positioning. Here's the link:

http://lutzandpatmos.com/beta/press.php

The relevant CSS file can be found at:
http://lutzandpatmos.com/beta/lutzandpatmos.css


There a number of magazines with press coverage. When you click on a link to a magazine title, the coverage from that magazine is made available below the rest of the links. If there is one clipping, the cover of the magazine is shown and that clipping is displayed. If there are multiple clippings, the user must click one of the covers to access that content.

Additionally, covers are displayed with an image of a date below them. To keep the covers and dates together and centered, I've placed them in a <div> tag.

My real problem is this: I'm developing on a PC, but the client is on a Mac, viewing with Safari. Therefore, the ultimate solution must work on Safari (although, unfortunately I don't know which version).

The covers are "stacking" one above the other when viewed through Safari. The correct behavior - which I've tried to specify through use of the css {display: inline } rule would be for these covers to line up left to right, and if there are too many, for them to begin a new line when they reach the end of the table cell.

I'm wondering if anyone can help me figure out a way to code the CSS such that the behavior intended (as seen in IE) would function correctly in Safari. Baring a CSS fix, are there other methods that you can think of to address the problem?

I've considered using the nowrap tag to keep the covers from stacking, but this would be a problem when there are more than 6 or so covers, which occurs in a few instances of the press coverage.

Please let me know whether I need to supply additional information relevant to figuring this thing out...

If no one has ideas, can anyone point to other resources that might be helpful in solving this issue. It's a substantial problem for me, and any all help will certainly be highly appreciated.

Thanks.
Ryan

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