1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

I hate IE

Discussion in 'CSS' started by JahRasta311, Jul 16, 2009.

0
Page 2 of 2
  1. JahRasta311

    JahRasta311 Peon

    Messages:
    201
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #21
    All I'm asking for is a nudge in the right direction. What should I use/not use?
     
    JahRasta311, Jul 20, 2009 IP
  2. JahRasta311

    JahRasta311 Peon

    Messages:
    201
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #22
    ok i changed the design of the site to cut down on code, but the main div keeps getting pushed down past the ad in IE. does anyone know what might be causing this? i have no remaining positioned elements.
     
    JahRasta311, Jul 20, 2009 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #23
    I'd say your first step would be to make nice to wd_2k6, who has already done a bit of work for you. An apology would be a good start.

    cheers,

    gary
     
    kk5st, Jul 20, 2009 IP
  4. JahRasta311

    JahRasta311 Peon

    Messages:
    201
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #24
    He didn't do any work for me.
     
    JahRasta311, Jul 20, 2009 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #25
    Open your eyes. Get rid of the attitude, and ask him nicely to please show you what he's done.

    gary
     
    kk5st, Jul 20, 2009 IP
  6. JahRasta311

    JahRasta311 Peon

    Messages:
    201
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #26
    I don't have an attitude, gary. There's no evidence that he actually did what he said.
     
    JahRasta311, Jul 20, 2009 IP
  7. JahRasta311

    JahRasta311 Peon

    Messages:
    201
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #27
    dear wd_2k6, I am sorry for calling you a wanker.
     
    JahRasta311, Jul 20, 2009 IP
  8. anuradhan

    anuradhan Active Member

    Messages:
    371
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    65
    #28
    internet explorer 7 or below sucks . even google chrome is bad. :cool:opera latest version is a better choice for online users.
     
    anuradhan, Jul 20, 2009 IP
  9. selinangela

    selinangela Peon

    Messages:
    35
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #29
    Well it sure looks like one in mine
     
    selinangela, Jul 20, 2009 IP
  10. JahRasta311

    JahRasta311 Peon

    Messages:
    201
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #30
    looks like 1 what?
     
    JahRasta311, Jul 20, 2009 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #31
    Sorry for the delay, and sorry for the derailment too.

    First step would be to clean up the markup a wee bit and re-arrange things a little... Content first, unified H1 so all pages have it common (a lot of people will argue about what I choose to use for H1 - old arguement that could fill multiple threads at this point)... Paragraphs for the paragraphs, etc, etc.

    Something like 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"
/>

<meta
	name="description"
	content="The Hub is the official portal to all of the different web sites we have to offer."
/> 

<meta
	name="keywords"
	content="movies, music, tv, downloads, bored, forum, hub, boredom cure, fun"
/>

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

<title>
	The Hub - Icanspeel Network
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		The Hub<br />
		<small>
			Movies, Music, Games, 
			<span>News, Reviews, and More!</span>
		</small>
		<b></b>
	</h1>

	<div id="contentWrapper"><div id="content">
		
		<div class="wideAdvert">
			<script type="text/javascript"><!--
				google_ad_client = "pub-2078942399731617";
				/* 300x250, created 7/20/09 */
				google_ad_slot = "1196672792";
				google_ad_width = 300;
				google_ad_height = 250;
			--></script>
			<script type="text/javascript"
				src="http://pagead2.googlesyndication.com/pagead/show_ads.js"
			></script>
		<!-- .wideAdvert --></div>
		
		<h2>Welcome to The Hub</h2>
		<p>
			The Hub is the official portal to all of the different web sites we have to offer.
		</p><p>
			Looking for some random, funny, weird news stories, then head to our news site to read about such gems as the guy who went into a convenience store to rob it and ended up buying a soda on his debit card, or the man who bought fake drugs from the police using fake money.
		</p><p>
			If you're bored and want to pass some time, look no further than our webgame site.
		</p><p>
			Wondering what the best titles are for the Playstation 3, or who is the best character in Street Fighter? Then head over to our vg lists site.
		</p>
		<div class="advert">
			<script type="text/javascript"><!--
				google_ad_client = "pub-2078942399731617";
				/* 468x15, created 7/14/09 */
				google_ad_slot = "2519060570";
				google_ad_width = 468;
				google_ad_height = 15;
			--></script>
			<script type="text/javascript"
				src="http://pagead2.googlesyndication.com/pagead/show_ads.js"
			></script>
		<!-- .advert --></div>
		<p>
			If you're looking for the icanspeel forum, you can find that here, too.
		</p><p>
			As always, we appreciate any support you can offer. We put hard work into bringing our content to you.
		</p><p>
			<a href="http://www.bvdesigns.com">Enjoy the design of our sites? Why not enlist our designer/web guru for your own web project?</a>
		</p>
	<!-- #content, #contentWrapper --></div></div>
	
	<div id="firstSideBar">
	
		<ul>
			<li><a href="/category/dumb-criminal-news/">Dumb Criminal News</a></li>
			<li><a href="/category/weird-news/">Weird News</a></li>
			<li><a href="/category/scientific-news/">Scientific News</a></li>
			<li><a href="/category/technology-news/">Technology News</a></li>
		</ul>
		
		<div class="advert">
			<script type="text/javascript"><!--
				google_ad_client = "pub-2078942399731617";
				/* 125x125, created 7/7/09 */
				google_ad_slot = "2205966144";
				google_ad_width = 125;
				google_ad_height = 125;
			--></script>
			<script type="text/javascript"
				src="http://pagead2.googlesyndication.com/pagead/show_ads.js"
			></script>
		</div>
		
		<div class="pollDaddy">
			<script type="text/javascript"
				src="http://static.polldaddy.com/p/1797100.js"
			></script>
			<noscript>
				<a href="http://answers.polldaddy.com/poll/1797100/">
					Which Things Do You Visit The Icanspeel.com Hub Page For?
				</a>
				<small>(<a href="http://answers.polldaddy.com">trends</a>)</small>
			</noscript>
		<!-- .pollDaddy --></div>
		
	<!-- #firstSideBar --></div>
	
	<div id="secondSideBar">
		<ul>
			<li>
				<a href="http://board.icanspeel.com/ucp.php?mode=login">
					Icanspeel Forum Login
				</a>
			</li><li>
				<a href="http://board.icanspeel.com/viewforum.php?f=10">
					Icanspeel Movies
				</a>
			</li><li>
				<a href="http://board.icanspeel.com/viewforum.php?f=15">
					Icanspeel Music
				</a>
			</li><li>
				<a href="http://board.icanspeel.com/viewforum.php?f=22">
					Icanspeel TV-Shows
				</a>
			</li><li>
				<a href="http://board.icanspeel.com/viewforum.php?f=24">
					Icanspeel V.I.P.
				</a>
			</li><li>
				<a href="http://board.icanspeel.com/viewforum.php?f=3">
					Icanspeel Movie Reviews
				</a>
			</li><li>
				<a href="http://easygames4you.com/">
					EasyGames4you
				</a>
			</li><li>
				<a href="http://videogamelists.com">
					VGlists
				</a>
			</li>
		</ul>
	<!-- #secondSideBar --></div>

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

<!-- Paste this code into the body section, not the head section of the page -->
<script type="text/javascript"><!--
	ch_client = "jasonb619";
	ch_non_contextual = 0;
	ch_linkStyle= "style3";
	ch_linkColor = "#0B264D";
--></script>
<script type="text/javascript"
	src="http://scripts.chitika.net/static/linx/chitika_linx.v3.js" 
></script>
<script type="text/javascript"><!--
	var gaJsHost=(("https:"==document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
--></script>
<script type="text/javascript"><!--
	try {
		var pageTracker = _gat._getTracker("UA-4126342-15");
		pageTracker._trackPageview();
	} catch(err) {}
--></script>

</body></html>
    Code (markup):
    The SMALL and SPAN inside the H1 would be to provide an images off version of the header that will look a lot like the images on one. The empty bold tag would be for glider-levin. Moving the actual page content before the columns helps with SEO and makes it a bit nicer for handhelds. Both columns had fairly obvious lists so get those into lists. The double-wrapper on content is the 'easy way' of content first columns...

    I took an axe to that final paragraph since all websites are in HTML, most use CSS these days, and designing to any one browser is made of /FAIL/...

    You took down the copy with rounded corners though, so I kind of forget where I'd apply those, but I'll just try and apply it the way I'd go about it.

    I'm headed to bed right now, but if I can find time tomorrow I'll toss together how I'd approach the CSS for that. I'm thinking I would likely float the google advert then use a negative margin to ride it over the sidebar area.... then I'd push that second sidebar down with a top margin. NOT certain how I'd handle the faux-columns though since they do not stretch to 100% the content area, going to have to play with that.
     
    deathshadow, Jul 21, 2009 IP
  12. JahRasta311

    JahRasta311 Peon

    Messages:
    201
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #32
    I blew up the page in order to try and get all the necessary page elements in their place. I might put the corners back on after I get everything right in all browsers, but for now, my main focus is on getting the main div to not drop past the sidebars.
     
    JahRasta311, Jul 21, 2009 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #33
    ... and here it is.

    http://www.cutcodedown.com/for_others/JahRasta311/template.html

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

    is unlocked so you can grab the gooey bits - being I redid all the borders and made a faux-column image, you'll definately want to grab that. I used several size-optimized .png that I also stripped the gAMA line from so there will be no gamma issues color matching in IE. Valid XHTML 1.0 Strict, Valid CSS Level 2 (you weren't doing anything complex enough to warrant non-validating workarounds), Tested working in IE 5.5, 6, 7 & 8, Opera 9.64 and 10 beta, FF 2 & 3.5, and the latest iterations of Safari and Chrome.

    You'll notice I put all the 'borders' into one file:
    http://www.cutcodedown.com/for_others/JahRasta311/images/borders.png

    We just slide it around to show the parts we want inside the appropriate div. All the DIV for those borders remain in flow so no absolute positioning needed. You'll notice the rounded bottom I put on the h1 (which I made taller because it looked funny to me) and the tops of the three columns are applied from a SINGLE element, .borderTop - and likewise the bottoms of the three columns are also a single div, .borderBottom. Being a fixed width layout that makes this pretty simple. You'll also notice that NONE of the heights on the content columns are fixed - fixing the height of elements that will have content in them is pretty much made of /fail/ - so making everything grow/shrink to fit is the order of the day... The .fauxColumn wrapper makes the three columns APPEAR to be full height since it wraps them, though they are in fact NOT all growing to fit. You don't actually have to make them the same height, you just have to make them LOOK the same.

    The tricky part as you are well aware is that wide advert bursting into the sidebar. I just floated it right and gave it a negative margin making it ride OVER the sidebar, then pad the top of the sidebar to push it's content down past it. Inside that sidebar you'll find a DIV called .borderSideBarTop - That is a single image containing all the rounded corners AND the background - no transparency. I pre-composited it this way so that I didn't have to pull too many tricks with the faux-columns - rather than dick with transparency there since the header is a fixed height, the paddings/borders are all fixed height, and the advert is fixed height, we can do the math to know exactly what part of the background SHOULD be there.

    On that image the elements that DO using transparent corners are done using 'close enough' aliasing. You take the average color you expect to be over, and anti-alias to that, then use palette transparancy instead of alpha for the big 'open' areas. It's not a perfect technique, but in most cases it gets the job done without resorting to the larger 24 bit alpha .png formats, or the headaches of making those formats work in IE. (Though as mentioned above, you still have to strip the gAMA line using a tool like tweakpng so that you don't have color-mismatch issues)

    You'll notice I darkened up the text in the sidebars to get better contrasts - I would suggest doing the same to your poll and adsense bits. The fonts on the content and side columns are all declared in %/em so they automatically enlarge 25% for large font/120dpi users (like myself) and it's been tested at both the default 96dpi and the larger setting. The fonts behind h1Logo.png are px since the image itself is px. (besides, who's going to bitch about 28px being too small?)

    Pretty simple stuff, though a few things are counter-intuitive if you aren't familiar with the techniques.

    Oh, and take a look at it with images disabled, you'll notice it kind-of retains the header appearance. I usually try to do that on all my pages because not everyone wants images, so it's best to keep them in mind.
     
    deathshadow, Jul 21, 2009 IP
  14. JahRasta311

    JahRasta311 Peon

    Messages:
    201
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #34
    That's really awesome. I'm gonna study your methods in great depth in the hopes that some day I can reach that level.

    Any suggestions for learning mid/advanced level CSS techniques? W3schools is a little on the basic side.
     
    JahRasta311, Jul 21, 2009 IP
  15. harmoniusdesign

    harmoniusdesign Active Member

    Messages:
    223
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #35
    Thank you very much for that link :)
     
    harmoniusdesign, Jul 26, 2009 IP
Page 2 of 2