Css div height problem in IE?

Glance this page in IE and other browsers.TutorialsWeb.com - SMT Assembly, and Reliability. Satellite Link Budgeting, and Environment Stress Screening.

Left side, boxes are fitted with the specified height in the page in all browsers except in IE, why?

Give me the solution to solve this problem…

Thanking you…

URL produces 404 error.

This problem is fixed by myself.
Thanking you…

Give me correct link… :slight_smile:

OOPS!..Page Error 404 has occurred.

Glad you found the answer to the problem yourself but in future if you find the solution to a problem yourself it is good etiquette to explain roughly what the solution was so that others may learn by example.

Otherwise the post just becomes a waste of cyberspace :slight_smile:

I get this message, along with the 404:

Warning: a web threat has been detected …

i wrote css for IE specific and for other browsers separately…
i.e;
This is for IE specific css;

*html #div { height: 200px;
font: 12px/1.3 “Arial”;
margin: 0px;
padding: 20px;
}

for other browsers css;

#div {
height: 200px;
font: 12px/1.3 “Arial”;
margin: 0px;
padding: 20px;
}

This solves my problem.
Thanking you…

What does *html mean? Or is that a typo and did you mean * html? If so then I don’t see, from an IE6 point of view, what the difference is between your first and your second snippet.

The star *symbol is an IE specific selector that allows you to override styles just for IE, so for example if i used the following for example…

#myDiv {
    height: 500px;
}

This would work regardless of the browser your using but in the case you need to support IE 6 you can use…

*html #myDiv {
    height: 498px;
}

And it will override the normal height set, personally this is not how i choose to do it because its messy in my opinion. A much nicer and cleaner way you can go about this is by reading the following article by Paul Irish Conditional stylesheets vs CSS hacks? Answer: Neither! « Paul Irish about conditional statements in your HTML.

This method is already been widely used by developers and is a much better choice because you don’t have to worry about creating or using custom scripts to use browser specific CSS stylesheets.

Yes, but shouldn’t there be a space between * and html? That’s why I thought maybe he made a typo. And the declarations in both his examples are identical so I don’t see how his solution solves anything.

I dont believe space is needed.

The universal selector is required to have a space around it be valid otherwise instead of representing something like:

div p{color:red}

you end up with a new element called

divp {color:red}

Which doesn’t exist :).

However IE7 and under get it wrong again and will parse it as div p anyway which is why *html still works in IE6 even although it isn’t valid without a space.

Actually I still I prefer * html for a quick fix compared to the Paul Irish method which I find extremely messy. It stops you thinking abut what you are doing and you end up just hacking for each version because its easier than working out what’s actually wrong. It’s usually only Ie6 that needs the hack anyway. It is easier to have the rules altogether in the same stylesheet though I agree.

The problem with .ie6 .test {} or .ie7 .test{} of course is it destroys specificity which is a bigger issue altogether (although the same could be said of * html but at least we are only dealing with IE6 here).

Conditional comments on the other hand can preserve specificity but do upset the cascade in some cases so aren’t perfect either.

It seems strange that everyone mentions conditional comments as needing an extra http request but that extra request is only required for the bad browser. No one else gets it. Yet by adding hacks into the main stylesheet means everyone gets the bloated stylesheet and everyone is penalised.

Isn’t it better to penalise only the browser that is wrong and not everyone else?

To be honest some of the ugly non valid hacks such as the underscore hack for IE6 are better than all the above because they don’t interfere with specificity or the cascade in any way. However, I just can’t seem to bring myself to use them :slight_smile:

Ye I noticed that also and if it fixes the OPs issue I can only think that there was a specificity issue somewhere along the line.

I agree 100% with you on that Paul and its how i used to code my CSS but moving into the new day and age now and starting to use the HTML5 boilerplate i have taught myself to kind of just glow with the flow so to speak. On a developer level i agree that using * and _ IE hacks are cleaner but eCommerce sites as an example may have a lot of elements floating around and i know from experience that when you play with floats in IE they tend to break quite easily if they are positioned in non standard way.

My main point I’m trying to get at is that we are all different and we both as developers like different cross browser compatibility fixes but at the end of the day we all achieve the same thing and that’s knowing we are keeping our clients happy.

Yes in the end it boils down to using a system that works for you and that you can understand and live with.

We all work differently and one man’s meat is another man’s poison so I don’t think there will ever be a right answer for all scenarios (and getting two developers to even agree is quite difficult also :)).

haha yea try telling that to Microsoft, oops :eek:. Was that too harsh??

PS: Sorry for highjacking your thread there for a minute venkat6134 but i think this a good thread for everyone to bookmark as you, myself and Paul O’B all got valid points across :slight_smile:

Ahhh. Ok good to know. I know I tested no space before and it worked. But I never tested it’s validity.

On th subject. Here are all the ways I was able to peice together back in the day. I like method #6. Though it requires some forethought it is the easiest down the road. The forethought fact keeps it out of main circulation probably though. http://www.visibilityinherit.com/code/target-ie.php

I’m a little surprised nobody’s pointed these out…

  1. No doctype – all browsers are in quirks rendering, which has the most impact on IE… There is no way in hell IE – ANY version – is going to behave like the rest of the world.

  2. Windows-1252 encoding, not supported by some clients.

  3. style @import instead of link – what, you’re still supporting netscape 4?

  4. tables for layout, inlined presentation, tables that shouldn’t even be in there if tables for layout was a valid site building technique, non-breaking spaces doing padding’s job (and breaking horribly on large font machines)… decade out of date coding practices and WYSIWYG-style broken nonsense.

Speaking of WYSIWYG, 99.999999% of issues can be traced right here:

<meta name=“GENERATOR” content=“Microsoft FrontPage 4.0”>

FRONTPAGE? Really? REALLY? REALLY?!? really…

I sincerely hope this is some decade old page you are trying to update, and not something new. It’s built mostly on HTML 3.2 with a few modern bits and pieces thrown in piecemeal – resulting in a page a decade and a half out of date. I wouldn’t even be TRYING to make that work, and instead would pitch it all out as it would be faster to rewrite it from scratch using modern techniques than to even attempt to continue bashing away at a page built with outdated and broken methodologies.

Shame since it actually seems to use UL, LI, H2 and P properly – those look really out of place given the rest of the code.

So… first step let’s redo the markup into something from THIS century:


<!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"
	lang="en"
	xml:lang="en"
><head>

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

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="keywords"
	content="smt,surface,mount,technology,reliability,satellite,link,budgeting,satcom,look,angles, certification,exams"
/>

<meta
	name="Description"
	content="SMT assembly and reliability (ESS). Satellite link budgeting, and certification exams."
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	TutorialsWeb.com - SMT Assembly, and Reliability. Satellite Link Budgeting, and Environment Stress Screening.
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		TutorialsWeb<br />
		<small>A home for tutorials</small>
		<span><!-- image replacement --></span>
	</h1>

	<form action="/search.htm" id="cse-search-box">
		<fieldset>
			<input type="hidden" name="cx" value="partner-pub-8523261719997194:cyny8p-wsjq" />
			<input type="hidden" name="cof" value="FORID:10" />
			<input type="hidden" name="ie" value="ISO-8859-1" />
			<input type="text" name="q" size="31" />
			<input type="submit" name="sa" value="Search" />
		</fieldset>
	</form>
	<script
		type="text/javascript"
		src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"
	></script>


	<ul id="mainMenu">
		<li>
			<a href="electronic-assembly.html">Electronic Assembly</a>
			<ul>
				<li><a href="/smt/smt.htm">SMT Component & Assembly</a></li>
				<li><a href="/reliability/reliability.htm">Reliability Enhancement</a></li>
				<li><a href="/smt/smd-components/index.htm">SMD Components</a></li>
				<li><a href="/nanotech/index.htm">Nano Technology Introduction</a></li>
			</ul>
		</li><li>
			<a href="satellite-communication.html">Satellite Communication</a>
			<ul>
				<li><a href="/satcom/fundamentals-of-satellite-communications.htm">Fundamentals of SatCom</a></li>
				<li><a href="/satcom/link-power-budget/link-power-budget-index.htm">Link Budgeting Explained</a></li>
				<li><a href="/satcom/satellite-link-budget-calculator.htm">Satellite link budget calculator</a></li>
				<li><a href="/satcom/calculation-of-satellite-look-angles.htm">Satellite look-angle calculator</a></li>
			</ul>
		</li><li>
			<a href="computer-networking.html">Computers & Networking</a>
			<ul>
				<li><a href="/computers/pc-motherboard.htm">The Mother Board</a></li>
				<li><a href="/networking/computer-networking.htm">OSI Model: A tutorial</a></li>
				<li><a href="/networking/tcp-ip/index.htm">Introduction to TCP/IP</a></li>
				<li><a href="/networking/wireless-networks/computer-networking-tutorial.htm">Computer Networking</a></li>
				<li><a href="/networking/routers/routers-overview.htm">Routers -IOS & JUNOS</a></li>
				<li><a href="/wimax/wimax.htm">WiMAX: Wireless Broadband</a></li>
				<li><a href="/rfid/index.htm">RFID: A Beginner's Guide</a></li>
				<li><a href="/spread-spectrum/index.htm">Spread Spectrum Comms.</a></li>
				<li><a href="/computers/flash-memory/index.htm">Flash Memory Tutorial</a></li>
				<li><a href="/computers/printers-scanners/index.htm">Printers and Scanners</a></li>
				<li><a href="/ipv6/IPv6-Tut-1.htm">A tutorial on IPv6</a></li>
			</ul>
		</li><li>
			<a href="rf-test.html">RF Test & Measurements</a>
			<ul>
				<li><a href="/rf-measurements/co-axial-cable-measurements.htm">Co-axial Cable Measurements</a></li>
				<li><a href="/rf-measurements/spectrum-analyzer.htm">Spectrum Analyzers Intro</a></li>
				<li><a href="/rf-measurements/noise-figure/noise-figure-measurement.htm">Noise Figure Measurement</a></li>
				<li><a href="/rf-measurements/frequency-standards/frequency-standards-index.htm">Time/Frequency Standards</a></li>
				<li><a href="/rf-measurements/coax-cables/coaxial-cable.htm">Coax Cables - Intro</a></li>
			</ul>
		</li><li>
			<a href="software.html">Software</a>
			<ul>
				<li><a href="/sql/mysql.htm">Introduction to MySQL</a></li>
				<li><a href="/activex/activex.htm">ActiveX EXE:Beginner's Guide</a></li>
				<li><a href="/software/myodbc-mysql/working-with-mysql-myodbc.htm">Working w/ MyODBC & MySQL</a></li>
				<li><a href="/software/drag-drop-tutorial/index.htm">Drag-n-Drop Using Visual Basic</a></li>
				<li><a href="/dragndrop_tut/vbdotnet-1.htm">Drag-n-Drop Using VB.net</a></li>
			</ul>
		</li>
	</ul>

	<div id="contentWrapper"><div id="content">

		<div class="subSection">
			<h2><span>New Articles</span></h2>
			<h3>
				<a href="/ipv6/IPv6-Tut-1.htm">
					A tutorial on IPv6
				</a>
			</h3>
			<p>
				>Internet Protocol Version 6 (IPv6) is the next generation	Internet Protocol (IP) for Internet Networking, which is often treated as successor to Internet Protocol Version 4 (IPv4). This article includes addressing basics, Loop Back address, Header information, Features of IPv6 and differences between IPv4 and IPv6.
			</p>
			<h3>
				<a href="/dragndrop_tut/vbdotnet-1.htm">
					Microsoft VB.NET - Drag-n-Drop Program
				</a>
			</h3>
			<p>
				Microsoft VB.NET is one of the fastest growing programming language for desktop and web-based applications. The article provides with code, an advanced feature of the VB.NET programming language, i.e. drag-and-drop feature. Example program is available for download. The article is useful for VB.NET programmers trying to use drag-n-drop method.
			</p>
		<!-- .subSection --></div>

		<div class="subSection">
			<h2><span>Featured Articles</span></h2>
			<h3>
				<a href="/smt/smt.htm">
					Surface Mount Assembly and Rework
				</a>
			</h3>
			<p>
				The article covers a wide range of topics including hand soldering, machine soldering, and rework. It also delves into various types of solders, fluxes, and cleaning compounds used in Surface Mount Assembly manufacturing. Finally, ESD (Electrostatic Discharge) precautions that need to be taken while working with sensitive components are also provided.
			</p>
		<!-- .subSection --></div>

	<!-- #content, #contentWrapper --></div></div>

	<div id="sideBar">

		<h2>Tools</h2>

		<h3>
			<a href="/satcom/satellite-link-budget-calculator.htm">
				Satellite link budget calculator
			</a>
		</h3>
		<p>
			This is used for calculating satellite uplink path loss, transmitting antenna gain, transmit EIRP & operating flux dencity, downling signal to noise ratio, and Link Margin.
		</p>

		<h3>
			<a href="/satcom/calculation-of-satellite-look-angles.htm">
				Satellite look-angle calculator
			</a>
		</h3>
		<p>
			This is used for calculating satellite azimuth angle (from true North) and satellite elevation angle by providing the values of ground station latitude (+ is North) and langitude (+/- 180 East) and the satellite longitude (+/- 180 East).
		</p>

		<h3>
			<a href="http://www.rfcables.org/tools.html">
				RF Tools and Calculators
			</a>
		</h3>
		<p>
			These include calculators for Return Loss (RL), VSWR & and Reflection Coefficient, Coax Cable Impedance & Reactance, dBm to milliWatt and viceversa, and Skindepth
		</p>

	<!-- #sideBar --></div>

	<div id="footer">
		<ul>
			<li><a href="/index.html">Home</a></li>
			<li><a href="/resources.htm">Resources</a></li>
			<li class="opposite"><a href="/disclaimer.htm">Disclaimer</a></li>
			<li class="opposite"><a href="/sitemap.htm">Sitemap</a></li>
		</ul>
		<span>&copy; 2003-2011 TutorialsWeb.com</span>
	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>

Which throws about 25% of what you had for HTML away, and fixes the semantics issues.

Gimme time to get dinner down my gullet and I’ll bash out some CSS to go with that.

According to some tests, it seems IE8 gets slowed down by IE6 conditionals. Very weird (and I’m not saying I actually care, either. :smiley: )

Here’s what I came up with:
TutorialsWeb.com - SMT Assembly, and Reliability. Satellite Link Budgeting, and Environment Stress Screening.

as with all my examples the directory is unlocked:
Index of /for_others/venkat6134

for easy access to it’s bits and pieces. I have time later I’ll revisit this thread to explain how/why/what.