I'm attempting to implement a design I created into WordPress which means I have additional hoops to jump through to make it look right.

It looks beautiful in FireFox, but in Opera (and I would assume IE as well) it looks horrendous. I don't even know where to START to make it work in Opera/IE without completely fudging up the FireFox layout.

Not only are the links not showing up correctly (all should be pink), but the rightcontent & rightcontenttext css is all out of alignment.

They should just get rid of those browsers...

http://pinkladyconstrictors.com/wordpress/

Actually, I'm surprised you're having trouble with Opera as it usually displays just like Firefox and has very few bugs. IE is the snake in the woodpile.

How does one even CHECK if a web site looks right in IE if they're on a Mac?

I had a friend look at this on IE and send me a screen shot...Man is it fudged up. I have no idea how to even FIX it.

I have IE6 here at home and at work..we're stuck with it until corporate IT gets off its dead butt and upgrades...

The biggest problem I'm seeing in IE6 is that your right column/content area has horizontal and vertical scroll bars. I'll have to pull apart the code to figure that one out.

The issue with Opera is a bit odd, looks almost like a specificity issue. At least the layout isn't buggered up. I'll take a look.

Hey Stephanie,

First off, you're dead right about WordPress. It does make things a much larger pain in the *** than they need to be. (But you can't say that and neither can I...they'll come for us.)

Even if you do get this to work in IE, it will only work in some circumstances (as it does with FF). Resize your text in FF one or two sizes up and you'll see what I mean.

To solve this, take the height of 191px off of your .rightcontent div. That will let the div resize regardless of content and avoid all but the most extreme resizing cases.

The other issue you have is not necessarily a bad thought on your part, but ultimately will lead to problems: you're trying to be "pixel perfect". Setting font sizes in pixels, for example, ultimately won't work. Let the text flow the way it's going to flow and work around it. It's going to do that anyway (bastard guy text!)

Wait...did I just beat LNR to the punch on CSS issues? Did I? I think I did!!!!

This may be the only time in the history of WMT that this ever occurs, people! YO ADRIAN, I DID IT!!!

What is Mac IE 5.5 comparable to?
I'm seeing COMPLETELY different problems in that then what PC IE 5.0 was showing.
I even looked at triplemoonsdesign.com & brennanyetterjazz.com and found that my centering efforts that show in FireFox & Opera are nill.

IE for the MAC? Not a thing, other than...well, IE for the MAC.

Personally, I wouldn't worry about IE for the MAC. It's a whole different animal and it's not even supported anymore.

http://www.microsoft.com/mac/product...ternetexplorer

Ok, it's actually not going to be as bad as I thought to fix your layout in IE. The ugly scrollbars are coming from the overflow: auto that's applied to almost every div in your layout. Remove that and the scrollbars go away. Thats the major part of the mess. There's a few other minor issues to ferret out.

The link text color problem is a specificity issue, if you add this, then the link color will be Pink:
.rightcontent2 a{
color: #f01186;
}

.rightcontent2 a:hover{
color: #FF66CC;
}

Wait...did I just beat LNR to the punch on CSS issues? Did I? I think I did!!!!

That's 'cause I've been tweaking her code to find and fix the bugs in it

In IE6, you'll have to run all your links together -in other words, when you close the 1st link tag </a> - start the next one right after it - </a><a href.. link2</a><a>... etc. That'll eliminate the gaps in the menu. Actually you really should put those links in an unordered list.

Back to the bug squashing...

Forget IE Mac - it's a D-E-A-D browser .. most people with Macs are going to have moved on to more modern browsers anyway.

I'm aware that Mac IE is no longer supported, but I'm looking for a solution for me to be able to see what IE users are seeing so that I may compensate.

Removing that height from the CSS didn't do anything to fix the problems in Opera I'm seeing. Didn't really do anything.

Jeeze you two are replying too fast for me!

I made those changes you suggested and now the footer's messed up and the main text area's still fudged up.

Unfortunately, IE Mac didn't even do things the same way as IE Win, so it still wouldn't help you enough.

I made those changes you suggested and now the footer's messed up and the main text area's still fudged up.

In which browser - IE ? I haven't got that problem figured out yet.. it's looking like float drop.

It's in Opera & Safari (which look identical). FireFox it's perfect expect the footer went hay-wire. I've nixed IE Mac since it won't help anyway.

I dunno about this whole CSS layout thing being for me. Way too much can go wrong with these browsers and I have no way to check them on IE. Makes me wonder if it won't just be easier to hire a programmer to create the templates.

CSS can be daunting until you learn it and IE buggers all of us.. cursed thing. Once you get the hang of the layout concepts, it's not that hard to do cross-browser layouts and squash the few IE bugs that might crop up.

My problem is I have no idea what it even looks like in IE! That's why I haven't any clue how to fix it!

Is their any news about IE fixing their problems with the next release?

Thank you both for all of your help, btw. You two are live savers.

What LNR said about IE. http://www.browsercam.com/ will help you view things in IE.

Your struggles are part of the process. We all have to go through them. It's part of the fun (and eventual satisfaction). Besides, at this point, LNR and I won't let you give up.

Now, back to the layout.

I've got part of your answer here:

/*HEADER*/
.header {
 width: 731px;
 height:158px;
 text-align:center;
 margin:0;
 padding:0;
overflow:  hidden; /* this isn't absolutely necessary; I'm just paranoid. */
}

...

  <div class="header">
  <div><img src="wp-content/themes/pinklady/images/hp/h1.jpg" alt="pink lady constrictors" border="0" height="133" width="731"></div>
  <div><img src="wp-content/themes/pinklady/images/hp/h2.jpg" alt="ball pythons" border="0" height="25" width="731"></div>
  </div>

IE didn't understand how your images were supposed to play, and the divs took care of that. There is a better way to do this, but for now this will work and let's worry about that first.

I've come up with a solution that works in IE, WinSafari, and Firefox. The good news is that you really weren't that far off. It was just a few little (albeit very annoying from your end) things.

http://www.walkonmypath.com/wmt/pink...nstrictors.htm

I've tried to document it a lot more than I normally would, but I'm not sure how much sense it will make. Feel free to ask questions if you have any.

YO ADRIAN, I REALLY DID IT!!!

Yeah.. you sure did

So I should wrap <div> around images in the HTML? What is the alternative method you mentioned?

I noticed you used .wrap & .main in your CSS. I get confused by this. Is that a standard thing to make things work correctly or is that a personal preference sort of thing. This whole CSS thing always gets me confused because you can name things an infinite number of different ways.

This right here:

.contentcontainer {
background:transparent url(../pink-lady-images/body-bg.jpg) repeat-y scroll left top;
width:731px;
}

What is the transparent about?

I also noticed this...

<!--<h2>Home Page</h2> -->

If it's commented out will search engines still pick up on that? I have been trying to determine a way to user header tags when I use images for fancy fonts.

I don't quite understand what this does:

<div style="clear:  both;"></div>

(You had to have known I'd have LOTS of questions )

LR, you should be proud of me...I made my first CSS only menu yesterday for another web site.