Help! I need to CSS fix in IE

buckmajor Active Member

Messages:: 574

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 58

#1

Hi there

I have my site done in CSS and it looks sort of good in FF, Opera, Safari so far but IE is not liking it at all with the margins and paddings .

There is so much to learn about CSS and still unsure if I even have the fundamental of CSS built correctly.

Please can someone help me.
Link

CSS file
Link

P.S I'm sure there is a simpler way of constructing my CSS with div tags, CSS names etc. Your critiques are most welcome as I willing to learn from anyone who gives a valid point.

Many thanks in advance.

CHEERS

buckmajor, Mar 22, 2009 IP

buckmajor Active Member

Messages:: 574

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 58

#2

Please can any expert help me out

buckmajor, Mar 23, 2009 IP

CoryR Active Member

Messages:: 68

Likes Received:: 2

Best Answers:: 0

Trophy Points:: 70

#3

A few things first:

Your site appears to be inaccessible due to database errors.

Validate your CSS.

Add a valid doctype to your site; this will ensure that strict mode is enabled.

CoryR, Mar 23, 2009 IP

ivogue Peon

Messages:: 246

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#4

You need to add DOCTYPE to your html file.

ivogue, Mar 23, 2009 IP

buckmajor Active Member

Messages:: 574

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 58

#5

Cool! Thanks for your reply. I thought I was already using a DOCTYPE or are you talking about the one for my template .tpl file?
This is the DOCTYPE I'm using well I hope .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I just need a fix for IE(internet explorer) and yea that would be a start for now.

P.S I have HTML Validation now so hope that helps

buckmajor, Mar 24, 2009 IP

buckmajor Active Member

Messages:: 574

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 58

#6

Please! Can someone help me fix my CSS in IE?

So sorry for the hassle but I just don't know why my site is out of place.
I don't know much about IE CSS bug fixes and would appreciate your help.

ISSUES:

1. My main content is shifted to the right by 10px
2. My footer is not in line for some reason
3. My content is out of place 'work.php, workWebsite.php etc'

I'm sure it's something small but even I can't get the smallest thing right yet.

Many many thanks in advance

buckmajor, Mar 24, 2009 IP

buckmajor Active Member

Messages:: 574

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 58

#7

All is good people and thank you all for your help ...joks. Well the search is over, I found out what the issue was and yes it was The Old IE "Doubletake", Float margins. So I was finally at peace and wanted to post my message ASAP.

I'm gonna break it down in case someone else like myself who has no idea why their margins are double on a float or etc.

The fix bug; {display: inline;}

Yes, add that to your CSS and that fixes your Double up margins.

CHEERS

buckmajor, Mar 26, 2009 IP

le007 Well-Known Member

Messages:: 481

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 103

#8

buckmajor can I ask a by the way question - what are you using to make your anim-gifs? They're nice!

le007, Mar 26, 2009 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#9

You may also want to change your commenting scheme. Your comment placement could also trip the IE 'double render' or 'dissapearing content' bugs since you have them BETWEEN floats.

There's a reason I don't do THIS:

</div>


since the comment after could trip the IE bug, and the word 'end' is redundant since that's what </div> means.

</div>

is how I handle that.

You've also got pointless comments in there:

<div id="content">

No, really? Opening a div called 'content' is the start of the content? Who'd have thunk it?

Might I suggest a quick read of this: http://www.ibm.com/developerworks/linux/library/l-clear-code/ - it may help you.

You've also got an absurd number of excess/unneccessary DIV, that wasteful mm_ nonsense javascript doing CSS' job, heading order that doesn't make any sense (what's with that empty h2?), spans doing the B tag's job (and don't let anyone tell you not to use B when STRONG isn't appropriate), multiple H1's (which no site should ever have more than ONE), paragraphs around non-paragraph content, etc, etc, etc...

It's not horrible though - I've seen far worse on these boards. My first step would be to clean up the markup. I have time later I'll toss together a demo of what I mean.

deathshadow, Mar 26, 2009 IP

buckmajor Active Member

Messages:: 574

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 58

#10

My man Deathshadow how are you friend. It's been a while but surely remember you like it was yesterday. Yea man you helped me out with my CSS last year and still use those techniques.

I agree with everything you said though and still got a long way to go with my CSS.

I will definitely read that article and reply asap.

CHEERS

buckmajor, Mar 27, 2009 IP

sandhipan Peon

Messages:: 23

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#11

i think u need to some changes CSS for IE. u can put hack for IE.for IE hack u can use symbol '!'
u have {margin: 0;padding: 0;}
for IE u write this: {margin: 0;padding: 0;!margin-top:0; !margin-bottom:0}
thank!!
<a href="http://www.kitnebaje.com/">book movie tickets online, movie show times, reserve restaurant tables</a>

sandhipan, Mar 30, 2009 IP

buckmajor Active Member

Messages:: 574

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 58

#12

sandhipan said: ↑

i think u need to some changes CSS for IE. u can put hack for IE.for IE hack u can use symbol '!'
u have {margin: 0;padding: 0;}
for IE u write this: {margin: 0;padding: 0;!margin-top:0; !margin-bottom:0}
thank!!
<a href="http://www.kitnebaje.com/">book movie tickets online, movie show times, reserve restaurant tables</a>
Click to expand...

Nice! Thanks kindly, so do I include that in my CSS or does it have to be a separate CSS file?
I always wondered what to do with IE hacks for I have clue of doing it.

buckmajor, Mar 31, 2009 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#13

Throwing goof assed hacks like that at it is NOT the solution... NOT that said statement should do ANYTHING since margin:0 automatically sets top and bottom to zero, so that's just complete trash.

I'm currently knee deep in a big project, but I can spend a couple minutes to 'clean up' your layout - basically just drop it into my standard way of doing things. First order of business is to clean up the markup - so let's axe the Tranny doctype, if it's a new page there is NO good excuse for not going strict. That strong tag in your heading shouldn't be 'neccessary' since you aren't doing anything with it - but, let's move it just to the first word only and 'do something' with it when we get to the CSS. The menu is at least a list, but there's no good reason for that DIV around it. That banner just really doesn't strike me as a heading... even if that is a word the subsections of the page really don't seem to go 'under' whatever 'creator' means, so I'd just make that a flat div.

Cleaning up the indenting and moving the comments around should both help make it clearer AND will prevent IE bugs.

The 'left' and 'right' columns are both just columns, and left/right is a presentational affectation - I'm just going to call them 'column' since they are both columns - since they are equal width, here's a little trick - float them BOTH left, and only set a margin on ONE side. Gives you the same appearance without making the math excessively tricky or worrying about IE 'dropping' the column below the other.

Same thing in the footer - because each column has unique properties, we'll keep those ID's to say what they are, but we'll add the class 'column' to say it's a column.

So... If I was to write that page, the HTML would be this:
<!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"
/>

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

<script
	type="text/javascript"
	src="blendimages.js"
></script>

<title>
	Home - Dmaireroa Creative Studio
</title>

</head><body>



<div id="container" class="home">

	<h1>
		<strong>Dmaireroa</strong>
		Creative Studio
		<span></span>
	</h1>

	<div id="content">

		<ul id="mainMenu">
			<li><a href="home">Home</a></li>
			<li><a href="services">Services</a></li>
			<li><a href="work">Work</a></li>
			<li><a href="contact">Contact</a></li>
		</ul>

		<div class="banner"></div>

		<div class="column">
			<h2>About Us</h2>
			<p>
				<b>dmaireroa Creative Studio</b> is a Creative Design Studio offering our clients a full range of multimedia services including corporate identity, design, motion graphics, streamed videos online, websites and a affordable web hosting. We have built a reputation for creating eye-catching rich media design which is captivating to the eye, as well as design and technical skills. We have over 5 years of experience and understanding of doing businesses online.
			</p><p>
				We also offer a new dimension to web site design, combining creativity and functionality in a practical and professional environment, focusing on providing effective solutions for our clients. We stand by our work and prided ourselves in the final outcome of our rich media designs. <b>dmaireroa Creative Studio</b> utilize cutting edge technologies and work hand in hand with you in developing your unique solution. This gives us the advantage to feel confident and entrust us with delivering high quality designs.
			</p><p>
				<b>dmaireroa Creative Studio</b> has been regimented to this principle "A Creative Mind With Integrity"; which enables us to explore new creative potential which is affordable to small business. Our drive has committed us to seek beyond the creativity barriers and deliver on future capabilities.
			</p>
		</div>

		<div class="column">
			<h3>News</h3>
			<ul>
				<li>
					18/3/2009 - Breakthrough Nation is now officially online. The organisation 'Breakthrough Community International'. Website URL <a href="http://www.breakthroughnation.org">http://www.breakthroughnation.org.</a>
				</li><li>
					27/11/2008 - dmaireoa Creative Studio recently completed Web prescence for Icon Creative Summit new Brochure website URL <a href="http://www.iconcreative.org">http://www.iconcreative.org.</a>
				</li><li>
					<b>COMING SOON...</b> New improved 'DIGITAL PRODUSA'
				</li>
			</ul>

			<h3>FEATURED PROJECTS</h3>
			<div id="blendme">
				<script type="text/javascript"></script>
			</div>
		</div>


	</div>

	<div id="footer">
		<div id="resources" class="column">
			<h2>Resources</h2>
			<ul>
				<li>
					<a href="http://www.developphp.com/">
						<img src="image/tutorial1.jpg" alt="Develop Logo" width="40" height="40" />
						Develop PHP
					</a>
				</li><li>
					<a href="http://www.e2interactive.com/">
						<img src="image/tutorial2.jpg" alt="E2 Logo" width="40" height="40" />
						e2 Interactive
					</a>
				</li><li>
					<a href="http://psd.tutsplus.com/tutorials/text-effects-tutorials/a-slick-supernatural-text-effect/">
						<img src="image/tutorial3.jpg" alt="" width="40" height="40" />
						A Slick Supernatural Text Effect
					</a>
				</li><li>
					<a href="http://www.biorust.com/tutorials/detail/97/en/">
						<img src="image/tutorial4.jpg" alt="" width="40" height="40" />
						Abstract Modelling
					</a>
				</li>
			</ul>
		</div>

		<div id="footercopy" class="column">

			<h2>Categories</h2>
			<ul>
				<li>
					<a href="index.php" title="Home">
						<img src="image/icon-home.jpg" alt="Home Icon" />
					</a>
				</li><li>
					<a href="service.php" title="Services">
						<img src="image/icon-service.jpg" alt="Services Icon" />
					</a>
				</li><li>
					<a href="work.php" title="Work">
						<img src="image/icon-work.jpg" alt="Work Icon" />
					</a>
				</li><li>
					<a href="contact.php">
						<img src="image/icon-contact.jpg" alt="image" />
					</a>
				</li>
			</ul>
			<p>
				dmaireroa Creative Studio Presents Version 1 "Creator" Design::Development::Flash::Video<br />Print::Website<br />Copyright&copy;2008-2009 dmaireroa Creative.
			</p>
		</div>

		<div id="footergoogle" class="column">
			<h2>Links</h2>
		</div>

	</div>

</div>

</body></html>
Code (markup):
Going to the store for a bit, but when I get back I'll slap together the CSS I'd use to make that work - CSS that will work cross browser, probably all the way back to IE 5.5... and for now I'm not seeing anything that will require a 'real' hack or conditional - maybe tripping haslayout or the display:inline on a float to prevent double margins... but that's stuff you can safely send to all browsers and not hide behind stuff like * html or !IE - this layout isn't complex enough to warrant that. 900px fixed width, normal flow height? That's simple.

deathshadow, Mar 31, 2009 IP

buckmajor Active Member

Messages:: 574

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 58

#14

My man Deathshadow..why is it that I always get excited when you reply to any of my message ..

I love learning of people it helps me become better. Although its complicated to fully understand CSS but I have improved from the last time (I think ).

I read that article '6 ways to write more comprehensible code' which helped a bit but just need to get the hang of it and so.

buckmajor, Mar 31, 2009 IP

Joomla Developer Banned

Messages:: 59

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 0

#15

Dude, Google it and you will find a lot of quick fixes..
If anywhere you have problems with CSS in IE,then !important tag is very nice to fix that. It works perfect for me..

Joomla Developer, Mar 31, 2009 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#16

... and here it is. The WORST thing I had to do was put display:inline on a float so that the margin wasn't doubled in IE, and use zoom:1 to trip haslayout on an element.

http://www.cutcodedown.com/for_others/buckmajor/dmaireroa/template.html

As with all my examples the directory:
http://www.cutcodedown.com/for_others/buckmajor/dmaireroa/

is unlocked so you can grab the gooey goodness.

Valid XHTML 1.0 Strict (thanks to getting rid of that STUPID MALFING 'target' nonsense), would be valid CSS if not for the use of zoom:1 to trip haslayout (big honking deal).

I did end up needing one more container that I hadn't 'noticed' in your original. Condensing properties and taking an axe to all the redundant/unneccessary CSS shaves over 10k off the CSS - though that would probably grow back to about 6-7k total by the time you get the sub pages in place... which is still half of what you had. In your original I think a lot of the 'problems' stemmed from declaring the widths of elements WAY more than neccessary. The only elements that need widths are the outermost wrapper, the H1 and it's span, and of course each column.

If I have time tomorrow I'll write up a breakdown of how the CSS works and why I made the decisions I did code-wise... but I've got to get back to work on a paying client right now.

Though seriously, anyone suggests !important or !IE, or IE conditionals in the markup, it's a safe bet they have NO CLUE what they are doing either not understanding inheritance, or being blissfully unaware of simple things like haslayout, box model oddities, or simply how to make elements wrap floats.

deathshadow, Mar 31, 2009 IP

Valve-Hosting likes this.

buckmajor Active Member

Messages:: 574

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 58

#17

WOW!! Thanks Deathshadow, the site looks good in all browsers and IE6 too. You make it so easy and I like the CSS you did too cause its way less than my one. Man I'm gonna study that CSS file until I understand it.

Thanks heaps..now I really can't wait to see the breakdown of the CSS.

Thank you Deathshadow, thank you.

CHEERS

buckmajor, Apr 1, 2009 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#18

Here's the breakdown of the CSS.

First thing in our CSS is a reset... While there are simpler resets like the classic * { margin:0; padding:0; } that can cause issues with form elements cross-browser since none of the browser makers are on the same page on how that should work... (I still say Opera's approach makes the most sense - just treat it as a inline-block element with no padding or spacing apart from what the designer says)... and there are more complex resets like Reset Reloaded which IMHO takes resetting elements a bit too far, as that ends up a fat bloated pig of code on stuff that frankly, I'm probably going to be changing the values of anyways. I've never needed more than what my reset does.

From there we have the body, which the first thing you'll notice is half a pixel of side padding. Yes, there is no such thing as half a pixel, but adding that to the side fixes a bug in gecko where depending on the screen width it can screw up what 'center' means between backgrounds and margin:auto and/or right:0; text-align:center; etc, etc. I added text-align:center; so that #container will be centered in 'quirks only' browsers like IE 5.x, from there it's just FaC (fonts and colors). You'll also notice I padded the bottom here - bottom margins on elements can 'collapse' in some browsers, using padding on the body instead doesn't run that risk.

#container is where we set our primary width - since most of our elements are block-level we can inherit width off of this instead of wasting time calculating it by hand on everything. We have to set text-align back to left here so that legacy IE will not center our H1.

anchors - FAC, nothing to write home about - though notice the states I set. For normal anchors (aka non-menu) always try to include a visited state so users can see where they are - likewise include :active and :focus along with your :hover so that keyboard navigators aren't left out in the cold.

h1, h1 strong, h1 span - position:relative so we can move our span around inside it, some font settings... Notice how I nested the strong, display:block forces the text not in the STRONG to a new line. Instead of specifying the height on the h1, you'll notice I just set some line-heights. 32px for the small text, 48px for the tall text, then 11px top badding and 10px bottom padding - 32+48+11+10 == 91, the height of the image. The absolute positioned span gives us our nice glider-levinesque image replacement. Again, view the page with images turned off to see why I did it this way.

#content - our inner div with some padding/borders, the margin-bottom being to space the footer off from it. Because we don't specify a width and it's block level, all our values are auto-calculated - AND should you end up in a quirks mode (like IE 5.x which only operates that way) you avoid any box-model issues. Padding the sides and bottom spaces in our other elements.

#mainMenu - Curious quirk of floats is that if you float left inside a float right, it 'works' - your elements will stack left, but be right justified. It's a trick that doesn't occur to a lot of developers to try. I don't even TRY to style the LI apart from setting them to display:inline - this avoids a lot of IE headaches like the staircase effect. Unless I'm building a cascading menu, I just set them to inline and 'walk away'. You'll notice I set the font-size in px, this is so that with the anchor padding I can dictate the height of the element for the image background. The anchors inside these of course get some padding, but you'll notice I load the image here but position it off the bottom of our anchor - this 'precaches' that image so when you hover for the first time the user doesn't have to wait for it to load. On the hover state you can see I slide the image to where we can see it, and I also set a background-color for people browsing with images off.

.banner - your H2 didn't strike me as somethign that should have been a h2, so I just made it a div.

.columnWrapper - your two columns had a unified white background, doing this here gives us that white background and the opportunity to wrap our floats. I do not pad the sides here so I can use width:100%; to trip haslayout. Easy enought to add margins to our columns instead.

#content .column - because we have columns in both our footer and our content, this lets us target them appropriately. Float 'em, display:inline to prevent IE6 from doubling the margin, set a width, margin on ONE side. Only putting the margin on one side means that our total width should be 15px less than our remaining screen width, preventing the dreaded calculation bugs that can make your second column appear underneath the content instead of next to it.

#content h2 - since we use H2's in the footer, again we use the wrapping element to target. You'll notice I did NOT fix the height of these as well, allowing them to grow with the dynamic fonts. I positioned the background-image in the top corner so that as it grows, the background-color will start to show. Set that background color the same as the bottom pixel of barGradeint.jpg, and the effect is seamless.

#content p - alignment, padding - no shockers there.

.newsList - turn off bullets, pad it in...

.newsList li - pad one side, load the background image, position that image in a bit and down a bit to make it pretty.

.newsList b - ooh, color.

#footer - since we have columns here, but no extra padding between the column elements we can use this as our float wrapper. We resort to zoom:1 to trip haslayout wrapping floats here because the holly hack (height:1%) would make it not show with the overflow state, and width:100% would screw up because of the border (making it 902px wide instead of the 900 of our #container). I set the fonts to a fixed metric size (12px) because we are working inside a fixed width area that could screw up on wordwraps. We use a background to apply faux-columns to the whole thing - instead of making our faux-column image the full width, I just made it the width of the center column so that the background-color shows through at the sides.

#footer .column - we set the width of our two outer .columns here, we will target the center one by it's ID later on. Stack 'em up by floating.

#footer h2 - fonts, colors, padding, yawn.

#resources ul and li - the first column content is a list, strip it, pad it. Because we want the text centered in the elements, we set our line-height the same as the height of the LI. little bottom margin on the LI will space them apart.

#resources ul img - float the image, pad one side to space the text away from it. Again using padding to avoid marigin headaches.

#resources ul a - setting it block and fixing the height makes the whole thing able to be hovered. You'll notice I made a new background image for those which contains both the hovered state and unhovered state one atop the other... Again just slide the background around to show the part you want to use.

#footer #footercopy - our center column gets it's width change. Because we already declared a width via #footer .column we have to say #footer before it or that change would be ignored (unless we put !important in there, and I prefer NOT to do that). If we do our math we find that after taking 320 away from 898px there's an extra pixel that makes this column not line up all the time. 1px of margin on the left fixes this. I set the same background color as our fauxColumn here so that images off this element is still legible with the foreground colors we are using.

#footer #footercopy - speaking of foreground colors. Again we have to say #footer before it since we said #footer h2... One of the tricks of specificity.

#footercopy ul and li - I put those in a list since they are basically the same as the top menu. naturally we set the list elements to display:inline so that everything gets auto-centered thanks to the text-align:center on #footercopy itself

#footercopy p - ooh look, padding.

... and that's it. Pretty simple.

deathshadow, Apr 1, 2009 IP

buckmajor Active Member

Messages:: 574

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 58

#19

Awesome! Deathshadow I read all of it and makes a lot of sense. I picked up the half pixel to fix a bug in gecko. I had no idea what a gecko was. Until I searched it and found out that it was a gecko rendering engine.

So that's what CSS 'Reset Reloaded' looks like. I'm willing to use anything that is 'All browser' capable . But thanks to you Deathshadow I can learn and study the CSS file you did up.

I have one slight alignment problem on one of my pages and unsure how to line them up in IE6. FF and etc is OK but not IE6. I tried to use a relative and display:inline but it didn't work. Maybe I have it wrong with my <img> or <p> tag somewhere.
Link

I will keep trying until I fix it, for I am still overwhelmed by learning so much about CSS.

Thanks again D, I wouldn't mind a magic fix on this one if possible ?

P.S I also forgotten to mention that, some time ago you said something about include php which I had no idea what that was. But when I did the research I put some valuable time into learning the basics of using php to build webpages and thanks again cause I am now using it which is a lot easier to generate a lot web pages. I still got a lot to improve in CSS and PHP but am happy to have come this far.

CHEERS

buckmajor, Apr 1, 2009 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#20

Well, again your comments could be biting you in the backside, that start and end comment placement could be tripping render bugs in IE. First thing I'd do is get rid of those comments.

Though from what I'm seeing I would guess that you have a width calculation error in there, making your P too wide to float up. Standards compliant browsers are actually more forgiving of that than IE (one of the few times I actually AGREE with IE's behavior)... though workborder is kind of vague, and there is no align attribute in a strict doctype... though I see you went back to the outdated nonsense that is tranny. I'd rename those to 'plate' because that's what those images are, a plate, then I'd float them instead of using align, and then I'd set margin-left on the paragraphs to make certain they ride up properly. I would NOT float the paragraphs, and I'd probably drop a class on each of those div just to make the hooks not go so deep.

That and axe that stupid malfing 'target=' bull - You shouldn't be shoving opening a new window down the users throat, they want to open it in a new window/tab they can CHOOSE to do so. It was dropped from the STRICT specifications for a reason. I'd probably also axe that silly presentational 'blue' class since that has no reason to even be in there.

BTW, .subnav H4 should probably be a h2, and the other h2 in #content that you have there should probably be H3 as they are subsections of the header before it.... and 'click here' links are SO 1997 - remember accessability guidelines recommend making relevant text (like say those headings) the links instead of using that type of meaningless link. (that or tack a title that says where it's going on there). I'd also axe those stupid W3C links since not one end user gives a pefta shtup, so why waste the bandwidth on it?

Oh, and it's either tab or spaces, don't mix and match like that, it looks like a disaster.

Pretty much I'd be changing the markup on that to:
<h2>WORK >> Website</h2>

<ul id="workMenu">
	<li><a href="workVideo.php">Video</a></li>
	<li><a href="workFlash.php">Flash</a></li>
	<li><a href="workPrint.php">Print</a></li>
	<li><a href="workLogo.php">Logo</a></li>
	<li class="last"><a href="workWebsite.php">Website</a></li>
</ul>

<div id="workList">

	<div class="workItem">
		<a href="http://www.breakthroughnation.org">
			<img src="image/230x160webBci.jpg"
				width="230" height="160"
				alt="Breakthrough Nation"
				class="plate"
			/>
		</a>
		<h3><a href="http://www.breakthroughnation.org/">BREAKTHROUGH NATION</a></h3>
		<p>
			The organisation &#8216;Breakthrough Community International&#8217; is expanding to incorporate a nation structural model, and is currently transitioning into &#8216;Breakthrough Nation&#8217;.
		</p>
	</div>

	<div class="workItem">
		<a href="http://www.iconcreative.org/">
			<img src="image/230x160webIcon.jpg"
				width="230" height="160"
				alt="Icon Creative Summit"
				class="plate"
			/>
		</a>
		<h3><a href="http://www.iconcreative.org/">ICON CREATIVE SUMMIT 2008</a></h3>
		<p>
			ICON Creative Summit is the event for activating and exhibiting untapped creativity. ICON Creative Summit is pleased to present their third annual multi-arts festival showcasing emerging artists in Music, Fashion, Shortfilm, Dance, Performing Arts and Visual Arts.
		</p>
	</div>

	<div class="workItem">
		<a href="http://www.digitalprodusa.net/">
			<img src="image/230x160webDp.jpg"
				width="230" height="160"
				alt="Digital Produsa"
				class="plate"
			/>
		</a>
		<h3><a href="http://www.digitalprodusa.net/">DIGITAL PRODUSA</a></h3>
		<p>
			Coming soon the new improved Digital Produsa
		</p>
	</div>

</div>
Code (markup):
In terms of putting the menu next to the H2, float the menu right, float the items left, then apply a negative top-margin equal to that of the h2. You may want to pad the right of the h2 to make sure the two don't overlap.

in terms of the CSS for worklist, it should go something like this:
.workList {
	padding-bottom:15px;
	background:#FFF url(images/gradient.png) 0 0 repeat-y;
}

.workItem {
	overflow:hidden; /* wrap floats */
	width:100%; /* trip haslayout, wrap floats IE */
	padding-top:15px;
}

.workitem img {
	float:left;
	margin:0 30px;
	padding:5px;
	background:#FFF;
	border:1px solid #CC0;
}

.workItem h3,
.workItem p {
	margin-left:290px;
}
Code (markup):

deathshadow, Apr 2, 2009 IP

Log in or Sign up

Advertising (learn more)

Help! I need to CSS fix in IE

buckmajor Active Member

buckmajor Active Member

CoryR Active Member

ivogue Peon

buckmajor Active Member

buckmajor Active Member

buckmajor Active Member

le007 Well-Known Member

deathshadow Acclaimed Member

buckmajor Active Member

sandhipan Peon

buckmajor Active Member

deathshadow Acclaimed Member

buckmajor Active Member

Joomla Developer Banned

deathshadow Acclaimed Member

buckmajor Active Member

deathshadow Acclaimed Member

buckmajor Active Member

deathshadow Acclaimed Member

Log in or Sign up

Advertising (learn more)

Help! I need to CSS fix in IE

buckmajor Active Member

buckmajor Active Member

CoryR Active Member

ivogue Peon

buckmajor Active Member

buckmajor Active Member

buckmajor Active Member

le007 Well-Known Member

deathshadow Acclaimed Member

buckmajor Active Member

sandhipan Peon

buckmajor Active Member

deathshadow Acclaimed Member

buckmajor Active Member

Joomla Developer Banned

deathshadow Acclaimed Member

buckmajor Active Member

deathshadow Acclaimed Member

buckmajor Active Member

deathshadow Acclaimed Member

Useful Searches