I hate IE

Any pros wanna help me with why my main box gets pushed down when viewed in IE? http://bestwebnewsonline.com/hub

 

Well, the lack of a CSS reset could be making life a bit more difficult for you, the non-semantic markup most certainly are issues. (You have headings, lists and paragraphs, and yet you do not seem to have either of the latter for tags).

I'm not sure what you mean by pushed down in IE - what version. I'm seeing the same appearance here in 7 and 8 as I do Opera and FF.... Though IE6 is completely screwed... (big shock) since it appears to be running the content text under your google ad - which IMHO is simply trying to get too fancy for your own good.

I do think a LOT of your problem is all the positioned elements out of flow for your rounded corners. You are using ten separate images to do the job of one and relying on a positioning method that is very likely to break given said elements are nowhere near the position they would be 'in flow'. (which is probably why in FF I'm seeing the dancing pixel offset on the right)

... and word of advice (unrelated to your issue), get rid of that STUPID ***** CHIKITA LINX SCRIPTED BULL... all that does is piss off users. (I literally scream at the screen every time any of that type of crap shows up on a site - I then turn off javascript and hit refresh)

 

I was hoping you'd be around to answer this.

What do you mean by a CSS reset?

How would you go about arranging the page elements? The way I did it was the only way I could find that would let me have such a design, I'm sure there's a better, more simple way.

I wouldn't use Chitika's inline ads if I could get my users to click enough to turn a meaningful profit. I don't get complaints about my ads because my users know that they're worthless leechers

 

A CSS reset is simply adding this to your CSS:

It's the simple way of resetting your CSS to be more compatible with different browsers. There are complicated ways that are more effective (i.e. Eric Meyer's Reset). * serves as a simple usage though.

 

body
{
margin: 0;
}

doesn't cut it?

 

Use Eric Meyers reset stylesheet. I use reset stylesheets on every project of mine and it's very popular to do so.

 

Yes, I would go with this option more than *. I have a seperate CSS Reset stylesheet that has Eric Meyer's Reset and more. You can find it here: http://serenedestiny.com/blog/development/open-thread-create-the-perfect-css-reset/

But that is the simplest way to reset every single margin and padding.

 

As I learned a while back, don't bother resetting margins and padding on elements who don't even have margins and padding (though * is so simple to select everything, I'll use it for margins). Also, why bother resetting other things, on elements which you don't even have? How about deprecated elements which you SHOULDN'T have? Why does Meyer have background: transparent on things which are transparent already? Why does he remove padding from the applet tag? Why are you using an applet tag? You'd better not be! Etc.

Mostly, it's bloated and can maybe defend itself is very very large projects which, due to their size, are already using most of those elements and already has multiple CSS stylesheets (simply due to size and complexity).

The only good thing I can say about Meyer's reset is it makes sure padding isn't stripped from form controls, the one dirty problem with
* {
margin: 0;
padding: 0;
}

if you don't have any forms, the above is fine. Otherwise, try to look at a dropdown/select in Opera after removing padding. Now try to add it back in manually to the select/dropdown. Lawlz.

body { margin: 0;}
obviously only removes default margins from the body, and this does not cascade (a good thing, I think).


My current reset (I'm still not sure if I have padding to remove in some of these!)

* {
  margin: 0;
}

html, body, ul, ol, th, td {
  padding: 0;
}
(usually nobody is going to notice FF's 1px of padding on th's and td's, however they completely destroyed some calendar tables I had, and while I could have removed the padding locally, I'm lazy and like to expect no padding on those things, esp since not all other browsers add padding to them.  Still not 100% sure if lists in any browser have default padding.  We all know they have default margins to make room for bullets)

img {
  border: 0;
  vertical-align: bottom;
}

Code (markup):

That's about it, though I often have a ul {list-style: none;} since most sites I make don't have bulleted lists. Often there's a bit of code to give little pdf icons after anchors whose href's end in .pdf, but that's extra.

 

I dislike meyers reset because it's just too damned big, and resets a bunch of crap that I either don't use, or don't use how he resets it.

Right now I use:

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

Code (markup):

I really don't need more than that reset.

If you are going to use forms at ALL, do NOT use the * { margin:0; padding:0; } approach as you will have nothing but headaches given how wildly different all the browsers treat form elements. That 'short' version is cute when prototyping, but really it's not something I'd deploy on a production site.

 

As far as I'm concerned, css "resets" are redundant bits of make-work, no more than time wasters. They are without redeeming social value.

Rather than start anew with my arguments, see this CSSCreator thread on the subject.

cheers,

gary

 

I would agree if all the browsers were on the same page for defaults - having to declare margins and padding EVERY time I make a declaration for the elements listed? **** that. Nab it once up top.

At the same time Meyers reset? Over the top. I've never had the quotes problem with blockquote - I don't use short quote 'Q' becuase it is rarely appropriate to any content I write, list-style I may want overridden on menus, but I don't want it overrridden on content so why global reset it if all browsers START OUT WITH THE SAME DEFINITION... I think I just hit on the head my problem with meyer's take on a reset...

It turns off values that have the same default in all browsers. The only reason to use a reset is to set things that are NOT the same on all browsers the same. This means the UL/OL for list-style, the text decoration **** on ins and del (how often do you use those in the first place?!?), the bizzare and pointless line-height on body (where you should be declaring the default font for your entire document ANYWAYS!!!) or even better, this 'gem' of his:

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Code (markup):

You only 'really' need the collapse if you are using tables for layout - which you shouldn't be doing, and if you have to say cellspacing in the markup ANYWAYS why the *** waste time declaring border-spacing? That's just retarded... much less the obsession with breaking the default outline behavior, dicking with the vertical-align, and what the **** is up with the background declaration?!? It's wasteful nonsense and gives resets a bad name.

 

Deathshadow, hate to break up your tangent about CSS resets, however I'm really interested in knowing how you'd set this page up, since it's clear you know a lot more than me.

 

It's no good just hating IE cause your site looks a mess in all browsers

Rather than positioning everything on the page (via the position: property) it'd be better to let elements flow naturally within the document, without using the position propery, and then use floats, margin and padding to put what you want where you want.

Don't get me wrong the position attribute can be used in select circumstances, but it's rare and should only be used or considered after you've grasped the concept of designing layouts without it.

 

doesn't look like a mess in my browser.

only the header and left sidebar are positioned along with the images for the border corners. tell me how to make it all work otherwise, and i'll be glad to make the changes just for you, bloody wanker.

 

Well it sure looks like one in mine, and I can't be bothered to tell you my browser or my OS.

I had just re-coded your page for you, but now i'm not going to post it up, it was good for refreshing my memory and a nice experience in learning to convert a pile of mess into something half decent at least.

Let's see how far you get with your attitude...

 

what you said.

Tee hee.

cheers,

gary

 

lol i called you a bloody wanker for what i perceived as an insult to my site. didn't think you'd take it so personally.

 

So, why did you take it so personally? Your coding is a mess, and he took the time to clean it up. But you came back with a personal attack. Until you have found a modicum of clue, you'll probably find really good help hard to find.

gary

 

Wanna know somethin weird? esr says it's a good idea to learn HTML when you're on your way to becoming a l33t hax0r. I thought that was kinda cool.

But then he said "learn XHTML because it's stricter". Wanker. : )

To the OP: Looking closer at your site it really does seem to just be the header in the entirely wrong place (and the rounded corners, and yes, those little things could have ds' rounded corners without images technique). But on the bottom it says "best viewed in Firefox."

Now I use firefox, but only because I don't like the alternatives much. It's a bloated, buggy browser. How again is this different than those little badges from the 90's: "Best Viewed In Internut Exploder 5 or Nutscrape Navigator7"

Those were nasty. And there's still one on the Rainbow Jesus page:
BEST VIEWED WITH
INTERNET EXPLORER
Forget all the other browsers and down with the Web 2.0 net police.

rainbow jesus
rainbow jesus
rainbow jesus
he's gonna walk on watah fo you
rainbow jesus
rainbow jesus
rainbow jesus
watcha gonna do

 

And when it comes to JavaScript, IE is an utter nightmare!