CSS - Interesting Ie

An interesting web site:

http://layouts.ironmyers.com/

This may be common knowlege, but I'm relatively new to CSS and was surprised to find that you can defing completely new tags with css.

For example, rather than defining a div.class like this:
Code:

div.myclass {
	width: 180;
	height: auto;
	font-family: Lucida Grande, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
	font-size: 12;
	color: black;
	padding: 2px 0px;
	text-indent: 4px;
	display: block;
	}

And using it in html like this:
Code:

<div class='myclass'>bla bla bla</div>

You can cut out the middleman (div) entirely and just define a new tag
Code:

myclass {
	width: 180px;
	height: auto;
	font-family: Lucida Grande, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
	font-size: 12px;
	color: black;
	padding: 2px 0px;
	text-indent: 4px;
	display: block;
	}

Which can be used in the html like so:
Code:

<myclass>bla bla bla</myclass>

I ran several styles defined this way through the W3C validator here and it had no problems with it. (Other than a few font choice gripes)

Custom tags worked perfectly in the following Mac browsers:
- Camino
- Firefox
- Safari
- Opera
- Xyle scope

The following two browsers couldn't handle the custom tags rendering a single line of unstyled text.
- IE
- OmniWeb

Can't speak for Windows or Linux browsers (Don't have either OS) but this seems like a pretty neat, W3C compliant, trick to simplify html code.

Hope someone else finds this useful

Ken

Hi Folks,

Newbie here, first post.

I need to figure out a way for the left border on the right column, its a DIV floated to the right (contains an image of a brain which has a certain irony!) to expand all the way down the page when you set the text to "largest" with your browser.

Example: http://www.cre8webdesign.co.uk/services.html

Can anyone help?

Thanks
Darren.

Howdy.

Disclaimer:
I've been working on a redesign of my homepage, and I decided to go 100% CSS. I'm still learning CSS, so if this has a braindead easy solution, just laugh and point it out to me.

The problem:
Here is the design I have for my website (forgive the ascii art):
Code:

+------------------------------------------------------+
| Header                                               |
+--------------+---------------------------------------+
| Stuff Bar    | Content          :            :Google |
|              |                  :            : Ad    |
| Navigation   |                  :            :       |
|              |                  :            :       |
| Firefox      |                  :            :       |
| Info Box     |                  :            +.......|
|              |                  :                    |
| Affiliates   |                  :                    |
|              |                  :                    |
+--------------+---------------------------------------+
| Footer                                               |
+------------------------------------------------------+

The Content has been artificially "width"ed to be no more than 400px wide. The Google Ad should float all the way to the right on a separate layer to keep out of the way on large monitors.

Now, what I want to do is also float every IMAGE from the content all the way to the right on large monitors:
Code:

+------------------------------------------------------+
| Header                                               |
+--------------+---------------------------------------+
| Stuff Bar    | Content          :            :Google |
|              |                  :            : Ad    |
| Navigation   |                  :            :       |
|              |                  :            :       |
| Firefox      |                  :            :       |
| Info Box     |                  :            +.......|
|              |                  :                    |
| Affiliates   |                  :                    |
|              |            : ------------------------ |
|              |            :  +---------------------+ |
|              |            :  | IMAGE from Content  | |
|              |            :  +---------------------+ |
|              |            : ------------------------ |
|              |                  :                    |
|              |                  :                    |
+--------------+---------------------------------------+
| Footer                                               |
+------------------------------------------------------+

I havn't a clue how to do that correctly. I want the Content to wrap around the image callout.

I'd appreciate the pointer.

I have several rows of images with centered text under them. I wanted to do this without tables, simply because the way the rest of the page is laid out it'd be easier for me to position the images correctly and line everything up right.

However, in IE when I test this the last column produces a double word of the last word in the centered text. It's kind of hard to explain, so I'm including my code. I did have this happen before and couldn't figure it out so I just used tables, but I'm so dead-set on getting away from tables that I figured I'd try again.

Here's the code:

Code:

	  <!-- Start row one -->
	  <div class="sscontent">
	  
	  <!-- scenic studio column one -->
	  <div class="sscol">
	  <img src="images/ss_temp.jpg" width="152" height="103" /><br />
	  Scenic name
	  </div>
	  
	  <!-- scenic studio column two -->
	  <div class="sscol">
	  <img src="images/ss_temp.jpg" width="152" height="103" /><br />
	  Scenic name
	  </div>	  
	  
	  <!-- scenic studio column one -->
	  <div class="sscol">
	  <img src="images/ss_temp.jpg" width="152" height="103" /><br />
	  Scenic name
	  </div>
	  
	  <!-- scenic studio column four -->
	  <div class="sscol">
	  <img src="images/ss_temp.jpg" width="152" height="103" /><br />
	  Scenic name
	  </div>	  
	  
	  </div>
	  
	  <!-- start row two - continue row structure throughout all scenes -->

	  <div class="sscontent">
	  
	  <!-- scenic studio column one -->
	  <div class="sscol">
	  <img src="images/ss_temp.jpg" width="152" height="103" /><br />
	  Scenic name
	  </div>
	  
	  <!-- scenic studio column two -->
	  <div class="sscol">
	  <img src="images/ss_temp.jpg" width="152" height="103" /><br />
	  Scenic name
	  </div>	  
	  
	  <!-- scenic studio column one -->
	  <div class="sscol">
	  <img src="images/ss_temp.jpg" width="152" height="103" /><br />
	  Scenic name
	  </div>
	  
	  <!-- scenic studio column four -->
	  <div class="sscol">
	  <img src="images/ss_temp.jpg" width="152" height="103" /><br />
	  Scenic name
	  </div>	  
	  
	  </div>

and the style sheet declarations:

Code:

.sscontent {
float: left;
width: 688px;
margin: 30px auto 0 36px;
padding: 0 0;
text-align: left;
display: inline;
}

.sscol {
float: left;
width: 152px;
margin: 0 20px 0 0;
padding: 0 0;
text-align: center;
vertical-align: top;

}

Now, I know that someone may bring up that the float is a block element and I can't display it inline, but it's the only hack i knew to get it to display in a straight line and still line up with the rest of the page.

I'm more than open to suggestions here!

-B