CSS - Empty Div Tag With Only Class Not Visable Ini Some Browsers

Is this illegal?

<div id="some_id"></div>


Thank you

this will be fun to explain, heres the code:
Code:

<div Id="Panel_contain" style="background-color: #cdcdcd;">
    <div Id="panel2" style="float:left">Blah</div>
    <div id="panel3" style="float:left">Blah</div>
</div>

lets say that the two panels inside amount to 50px of size (just for mental visualization). In firefox, the background color of the outside div is the whole height of its div (itself)

in IE6, the background only goes down, lets say 10 px and stops.

From what i have got out of this, IE6 sees that div as empty? and so renders it wrong? basically i need to get the height of the div to extend.

Advanced:
All of this code is being generated by VB (its a dynamic AJAX program, where all the controls are built from info from a database) so i was thinking that adding some text below the inside divs would make it not 'empty', although i can't figure out how to append to the bottom of the div programmatically, because i dont know when the div is done being filled. If that makes sence

outro:
basically im pretty sure i should be able to fix this with some type of CSS IE6 bug fix.
Thanks!

http://www.thegi.net/tree/retail.htm

I'm taking a Photoshop layout and turning it into HTML for a friend of mine. I just started the HTML process and am having issues right off the bat.

NOTE: Pardon the semi-complete markup,
I like to make small HTML documents locally to get the pieces to line up correctly and then I merge it with the final document template once it works.

If you look at the above link in FireFox you will see everything lines up correctly, but in IE 7 (and maybe other browsers, I haven't gone that far yet) you will see gaps below the top set of divs and above the bottom set of divs. I have tried setting the margins and padding to 0 with no luck.

Any ideas?



Edit before posting:
ACK! I solved it in IE by adding a DOCTYPE. Guess quirks mode made it render stupid. Is there anything I should be aware of here regarding this issue? Any pointers or gotchas I should look out for?

I am a hell of a PHP developer, CSS is my weak point =)

EDIT AGAIN!

I am also going to move the styles into an external sheet once I get it working.

I am building this layout using strict xhtml and css.
Now I run into a problem with the menu buttons. On Firefox they
look just like they should. Though, Internet Explorer 6 adds an
empty space between each button. See the example page and CSS.

Basically, Internet Explorer adds that space under images. You can
also see it under the header image. Any idea on how to fix it?

I tried to add overflow: hidden; - it seemed to fix the issue
with the header div, but did not make any effect in the list.
Actually, in THIS case, as in the example page, I could make it
without using images. Add text, borders and so on, which would
probably fix the problem, but there are cases when I just want
to use images.

Both, Strict XHTML and CSS of the page are 100% valid.

Thanks,
Timo

I've got a form that I'm trying to lay out. I've prepared examples.

http://www.dollardns.net/devshed/example1.html

This is approximately what the form should look like. But I don't like how I managed to pull it off. I've explicitly declared a height for the middle row in my form. I want this to be automatic based on the contents.

http://www.dollardns.net/devshed/example2.html

But this is what happens if I take out the explicit height. The float lefts for the inner "box"es confuse the parent div into thinking it has no content. So the height collapses, and chaos results.

http://www.dollardns.net/devshed/example3.html

I've also tried making the "box"es use a display of "inline". But that doesn't work possibly cause inline elements are not supposed to contain block elements.

Any recommendations?

test

Hi,

I need to apply a border on the bottom of an empty cell, but since IE6 does not support the empty-cells property, the border appears only on tiny part of the cell. Is there a workaround?

I have already tried placing &nbsp; inside the cell but it doesn't work that way either.

Hi to all,

I have a problem with an empty div. I have created an empty div as follows: Code:

<div id="more"></div>Hello

Now I set the height property of the empty div equals to 20px. On IE 7.0 it looks fine, with the hello under the empty div, however in FireFox and Opera Hello is being display nearly inside the empty div. What can i do to fix this and make it display always under the empty div?

Thanks and Regards,
Sim085

ps: I am using the Strick Doc Type. and I need the empty only to colour it in a different colour (for style that is).

I have the following code. I realize some of you are going to cringe when you see the tables in the div tags. This application was completely tables a few months ago and I have nearly completed the switch to divs.. but this page is a generated page that is customizable and I haven't had the time to spend on converting it.

unfortunately I cannot give a link to this page.

I've believe I've slimmed this down to only the relevent code.

The extra space occurs after the outerImageTable's content. If I set the outerImageTable's background color then the extra space also changes colors so it is part of the outerImageTable.

note: There would actually be multiple instances of the innerImageTable each representing a tab.

Code:

<div id="content" class="ParentDivBrowse">
	<div id="subContent" class="ChildDiv">
		<div class="outerImageTable">
			<div class="innerImageTable">
				<img src="/XXXXYYYY/images/leftselected.bmp" />
				<button class="XXXXTabSelected" tabindex='-1' type="submit" name="DLG1_T801_MAIN" value="0" onClick="buttonClick(this)">
					Mainn
				</button>
				<img src="/XXXXYYYY/images/rightselected.bmp" />
			</div>			
		</div>
		<div style="float:left;">
			<table border="0" cellspacing="0" cellpadding="0" width="100%">
				<tr>
					<td colspan='2' valign="middle">
						<table class='XXXXDlgTable'>							
							<tr>
								<td colspan="2" height="60%"></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
			<table class="XXXXActionTable">
				<tr>
					<td class="XXXXActionTable">
						<table class='XXXXActionWidthFix'>
							<tr align='center'>
								<td width='0'></td>
								<td align='center' class='ActionButtons'>
									<button title='Clear' onMouseOver="Clear_img.src='/XXXXYYYY/images/actions/shadow/action_clear.png'" onMouseOut="Clear_img.src='/XXXXYYYY/images/actions/plain/action_clear.png'" onClick='buttonClick(this)' id='button_Clear' name='Clear'
										tabindex='-1' value='Clear' type='submit'>
										<img vspace='0' width='16' height='16' name='Clear_img' src='/XXXXYYYY/images/actions/plain/action_clear.png'>
										Clear
									</button>
								</td>								
								<td width='0'></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>
	</div>
</div>

Thanks if anyone can help me.

CSS entrys
Code:

.OmniTabSelected{
	font-size: 12px;	
	font-family: avenir, arial;
	color: white;
	background-color: #826182;		
    border-top:1px solid;
    border-bottom:1px solid;
    border-top-color:black;
    border-bottom-color:#826182;
    border-left: 0px;
    border-right: 0px;
	height:19px;
	vertical-align: top;
	margin-right: -2px;
	margin-left: -2px;
	padding:0px;
	padding-right:8px;
	padding-left:8px;
	padding-right:expression('2px');
	padding-left:expression('2px');
	
}
.innerImageTable{
	position: relative;
	float: left;
	cellspacing:0px;
	cellpadding:0px;
	border: 0px;
	margin-top:-2px;
	margin-top:expression('-4px');
	white-space: nowrap;
	vertical-align:;
}
.outerImageTable{
	position: relative;
	float:left;
	cellspacing:0px;
	cellpadding:0px;
	border: 0px;
	margin-top:2px;
	margin-top:expression('4px');
}
.ParentDivBrowse {
	position: relative;	
	width: 100%;		          
	width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
	min-width:997px;
	max-width:100%;
	overflow:hidden;
}
.ChildDiv {
	position: relative;	
	width: 100%;
	width:expression(document.body.clientWidth < 997 ? '837px' : '100%');
	
}

I'm working on some sortable data tables. I have designed the CSS so the columns look raised and the cells are outlined. The problem is that empty table cells are not outlined in IE.

I can fix this by doing a border-collapse, but then I lose the raised look of the headings. I can also fix this by adding a non-breaking space in the individual cells, but the developers tell me that they don't want to add the code to check whether there is data or not and then fill the empty cell with a non-breaking space.

So, I'm hoping there's some CSS trick I can use to force IE to outline the empty table cells. Anyone know of any?

The attachment shows the look with the empty cells.

Hi, targeting both IE and FF i seem to experience compatibility issues ... The CSS design on IE looks perfect, but same JSPs on FF gives a little bit of dull on colors (or fade) ... I also found some strange behavior in FF on my struts application which i don;t see when testing on EE. Sometimes a page reloads itself on submit... Any issues around this? Oh, i know blinking text is not adviced, but can't seem to get it to work either (using CSS text-decoration : blink)

Thanks for your help

Thanks for taking the time to read my question

I am starting to make a page, and for some reason I have a white space between two sections of my page.

I don't know why.

I don't have a domain for this page yet, so I've put it under my band domain.

The space is between the Menu and the info portions of the page.

Any ideas?

http://www.pierced.ca/kelly/

css:
Code:

@charset "iso-8859-1";
body {
text-align:center;
margin-top: 10px;
background-color: green;
background-image: url(C:/Documents and Settings/McIntyBD.MAPLELEAF/Desktop/Kelly/images/fall-leaves.jpeg)
/*background-color: #d8d8d8;*/
}

#frame {
width: 640px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: white;
}

#header {
width: 640px;
height: 100px;
color: #A6A6A6;
background-color: #b12514;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
/*border: medium solid #E0E0E0;*/
}

#footer {
width: 640px;
height: 20px;
background-color: #b12514;
color: #A6A6A6;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
/*border: medium solid #E0E0E0;*/
}


#menu {
color: white;
font-weight: bold;
float: left;
width: 100px;
height: 400px;
text-align: left;
text-transform: uppercase;
font-size: 20px;
background-color: #FD9800;
/*border-left: medium solid #E0E0E0;
border-right: medium solid #E0E0E0;
border-bottom: medium solid #E0E0E0;*/
padding: 8px;
line-height: 25px;  
}

#menu a:visited {
color:aqua;
font-size: 12px;
width: 84;
}
#menu a:hover {
color:#005c00;
font-weight: bold;
font-size: 12px;
width: 84;
}
#Menu a {
color:yellow;
font-size: 12px;
width: 84;
}


#info {
background-color: #ffc047;
color: #005c00;
height: 400px;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
text-align: left;
font-size: 16px;
}

#info p {
text-indent: 12px;
font-family: ZapfChan MdIt BT;
letter-spacing: 4px;
line-height: 25px
}

a:visited {
color:#FFFF00;
font-size: 12px;
}
a:hover {
color:#FFFFFF;
font-size: 12px;
}
a {
color:#A0E5FF;
font-size: 12px;
}

Hi,
I have a pure css menu that uses hover,
Kravitz told me it wont work in touchscreens which I searched for and is so, thanks Kravitz.

Also one told me to keep the hover and add a class to make it posible to click on li if hover does not work.

Problem, cant test this as I dont have any touchscreen.
So 1. is there a way to add a code to disable the hover affect?
2, maybe a website where you can test but using mouse....
3. Dont remember, its validates but are there anything against using <a href="#">?

Thanks,
Helen

I am having a problem with a menu generated by a CMS. Basically it generates a series of nested unordered lists for the navigation. It only shows a parents children menu items if you are within that section. The problem is that it still outputs the unordered list and list item elements for the other child menus, but just leaves them blank. Leaving something like this:
Code:

<ul><li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

This works fine in Firefox... but of course when you get to IE, it leaves big vertical spaces in the navigation.

Unfortunately, I can't attach any IDs or classes to the child UL or LI elements. There is only one ID on the main UL, <ul id="subnav">.

So my question is, can anyone think of a way that I can modify my CSS to take out those blank spaces created by empty <ul>s in IE?

You can see the page he
http://www.holidaytravelincentives.com/index.php/products/air-accommodations/

Hi

I have a page that looks something like this

Code:

<style>

#container {
	border: solid 1px #000000;
	width: 600px;
	padding: 10px;
}

#banner {
	height: 200px;
	width: 600px;
	background-color: #FF0000;
	font: bold 20px Arial, Helvetica, sans-serif;
}

#layer {
	position: relative;
	top: -198px;
	height: 196px;
	width: 150px;
	z-index: 1;
	left: 2px;
	background-color: #FFFFFF;
}

</style>


<div id="container">
	<div id="banner">Hello</div>
	<div id="layer">This is a layer</div>
	
	<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
			magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
			nisl ut aliquip ex ea commodo consequat. 
			</p>
</div>	

If you view that site, you will see that there is an empty space below the banner-div, which is reserved for the layer. I need to get rid of that empty space, in other words, I want the text to begin right after the banner-div. Any ideas how I can accomplish this?
Using relative positioning for the text is not possible, because of the structure of the rest of the page (which I haven't pasted here).

[edit]
Floating the layer will work partially, the text will begin right below the layer, but there is still an empty space on the left side of the text - that has to go too.
[/edit]

All help is appreciated. Thank you in advance
- Kimppa