Thursday, June 7, 2012

[HTML] Divs no wrap in Doctype 4.0 Transitional for IE7

So you're making a menu and you're forced to use Doctype 4.0 Transitional. This means that min-width will not work for you if you are doing this for IE7. So for fancy stuff like a menu bar, the elements will start stacking underneath each other as the window is resized. I believe min-width may work for Google Chrome, I'm not sure.

I won't put any code here in the mean time since I'm at a very special place, so I'll try to give an idea as best as I can.

My goal was to make a horizontal menu to look like this:

| ---------------------------- page width = 100% --------------------------------------------|

|  Home |  Links |  About Me |                                                                                              

Let's break it down (3 parts) and give them the needed CSS values.

1. Wrapper

border-top: whatever u want
border-bottom: whatever u want

2. Wrapper of the actual menu elements ( no visual representation here)
width:Choose a value that extends the width of the accumulated menu elements

3. Actual Menu Elements
| Home | Links | About Me |
float: left
border-left: whatever u want
border-right:whatever u want

That's ittt....

Next up is blocking a floating right div. So say you have a layout like this:

|                                                                                                                            float item |
|                                                                                                                                           |

So when you resize it, it will look like this, which is not desired

| at item|

So you want to block it the float at some point to keep it from moving left. I haven't figured that out yet so stay tuned.