Topic: CSS Bugs...

I have two problems with this CSS I'm working on.

One is fairly simple and I think it's just some bad CSS. I'm making a table layout in CSS for a gallery. I've used <dl><dt><dd> for the table like effect. So far so good. I've made each image in the gallery a link which has a border around it in a light color with some padding in between. On rollover the border color changes to dark and we have a nice looking effect. Opera, FireFox show it marvellously... can't say the same for IE though. IE doesn't show the hover! This is my CSS, where me messing up??

dl.gall { float: left; margin: 10px;}

.gall dt { background: none;}

.gall img { width: 75pt; padding: 5px; border: none; border: 1px solid #eaeaea;}

.gall img:hover { border: 1px solid #ccc;}

My second problem is a bit confusing (for me) the layout I have of the overall site is like this:

| SideBar |---| MainContent |
| SideBar |---| MainContent |
| SideBar |---| MainContent |
| SideBar |---| MainContent |

I've done the above using absolute positioning. I tried it with floats but it wasn't going anywhere! I have both of them positioned absolutely the problem is with the MainContent. I have only specified a width to the SideBar and want the MainContent to be fluid. With the following code I've managed to get it working in IE and FF but for the first time ever Opera is giving me a hard time and I've just noticed this!

#sidebar { position: absolute; width: 300px; left: 0; margin-top: 2.5em;}

#maincontent { position: absolute; left: 300px; 

margin: 2.5em 0 6em 0; padding-right: 4em;

padding-bottom: 5em;

In IE and FF when I increase or decrease the window size the MainContent does it's magic and flows but in Opera it doesn't. It tries to maintain it's width even though I haven't specified any! I tried setting width to auto or inherit but nothing infact those two get IE all jumpy! And if I set the width to 100% then well we have a major horizontal scroller problem! Where is the bug I can't see it?!?



(Edited by templar654 on 04-08-2005 17:54)

(Edited by templar654 on 04-08-2005 17:57)

1)

quote:

---

I'm making a table layout in CSS for a gallery. I've used <dl><dt><dd> for the table like effect. So far so good.

---

I'm confused. You're making a tabled layout, or you're making a list?

Is it actually a list, requiring mark-up as such, or is it tabular data that should be marked-up as a table, or option C?

2)

quote:

---

can't say the same for IE though. IE doesn't show the hover!

---

The :hover pseudo-class is not supported in IE for anything other than the a element.

3) I'd have to play around with this one - no time at the moment. You could specify both boxes as % widths.
As a general rule, I do not use absolute positioning. Causes more problems than it solves, by far.



(Edited by DL-44 on 04-08-2005 22:22)

What I meant was I'm making a mock up of a table layout using lists. It looks like it's got tables but Alt-F3 and WHOA CSS!! Ok so what should I do about the IE not hovering thingy? I tried placing the hover on the a tag but nothing

As I said before I tried using floats in the layout but it was getting all mushed up so I took the seemingly easy way out. Not so seemingly anymore now! I'll try to get floats back in this... why do I have a feeling it's not going to look very pretty

I'd post an example of the page but my webhost is acting up again need to find a new one.

If what you want is a table, then you should use a table.

You should never go out of your way to "mock" a table. The whole point to using proper code is to...well...use proper code. If a table is in order, then use a table for the love of god! However, a list may also be appropriate, depending on what you're doing exactly...

As for what to do about the hover - you'll have to give a more detailed example of what you're doing. give the code at least if you can't show the page (the html and the css).

WILL DO!!

<dl class="gall">

<dt><a href="serves/01.jpg" target="_blank" title="View Serve" />

<img src="images/pic01.jpg" title="Round About" /></a></dt>

<dd>Caption</dd></dl>

The CSS for the gallery is all up there this is the HTML this is also the list style I'm using to mock a table. I'm mocking this table layout thingy because I've done it before but I never used this hover effect before. So the problem I have is not the table layout it's with the hover.



(Edited by templar654 on 04-09-2005 06:13)

using this setup works for both firefox and ie -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>



<title>Untitled</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<style type="text/css">



img	{

	border:none;

	}



dl.gall

	{

	float:left;

	margin:10px;

	}



.gall dt

	{

	background:none;

	}



.gall a img

	{

	display:block;

	margin:auto;

	}



.gall a

	{

	display:block;

	border:1px solid #eaeaea;

	padding:5px;

	}



.gall a:hover

	{

	border:1px solid #ccc;

	}



</style>



</head>



<body>



<dl class="gall">



	<dt>

		<a href="serves/01.jpg" title="View Serve">

  		<img src="images/pic01.jpg" width="75" height="75" alt="Round About" />

		</a>



	</dt>



	<dd>Caption</dd>



</dl>



</body>

</html>

1) proper tag closing: make sure youonly use the trailing slash to close empty tags - not thins like the <a> tag!

2) setting the <a> to display block and setting the hover attributes to it will get you the effect you want. It is a shame that IE does not recognize hover for other elements, but that's what we're stuck with at the moment.

3) the height and width of an image should be specified in the HTML - it's one of the very few elements that should be done that way. Also, while the title attribute is ok to use for the img tag, it does not replace the alt attribute - always use the alt attribute!

As for the table/list deal - I undersstand that's not what your problem is, just trying to clarify good coding practices. Use whatever element is appropriate for the task at hand. In this case, it's hard to say without seing a total page. It could be that a list is the right thing to use. It could be that a table is. It could very well be that niether element is appropriate.

Tahnks helpful