9 replies [Last post]
chewmanfoo
chewmanfoo's picture
Offline
Regular
North Texas, USA
Last seen: 10 years 40 weeks ago
North Texas, USA
Timezone: GMT-6
Joined: 2003-06-15
Posts: 21
Points: 11

I really hate to post this, since I can't even draw a circle with Photoshop (and I can't match my socks in the morning), but I'm at an impasse on making my site cross-browser, so go here and laugh. But, then come back here and tell me why it looks like crap on IE, or Conqueror, or whatever.

1.) The title of the page doesn't show up. Why? There's a box around it in Mozilla. Why does the world hate me? Aaaarg!
2.) Ditto on the titles of the stories. I spent all this time making the title stick to the left and the "department" hang to the right. And lo and behold, IE doesn't even show it. What a hoot! Only, I'm not laughing.
3.) The bottom of each story should show the date and author in a little black box stuck to the bottom. It doesn't on IE.

Please help, before I quit this idiocy and get a job in sales...
chewy

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 5 years 33 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

a lot of problems with this site - on anything but Mozilla

A quick glance through the CSS shows nothing bad up, and again a quick glance at the problem areas shows nothing glaring. It works spot-on in Moz1 <edit>ahem next time I'll read the title of the post</edit> - but IE chokes. It's not bad CSS, it's bad IE...

OK I took out the float:left box which holds the title and now the title shows fine in IE (well, IE6). God only knows how to get the blurb on the right to show in IE - I removed the 'position : relative' from the first-paragraph-content-style and it then showed, but the title disappeared off to the left... I then returned that statement and removed the background-colour, and it showed up again. Grr.

More to come...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

chewmanfoo
chewmanfoo's picture
Offline
Regular
North Texas, USA
Last seen: 10 years 40 weeks ago
North Texas, USA
Timezone: GMT-6
Joined: 2003-06-15
Posts: 21
Points: 11

WOW. Keep it coming...

Hey, thanks so far. I'm trying to head up a project at work which will use Apache, PHP, MySQL and (ta-da!) CSS. I want to push CSS, so that we can avoid the tables. I'm a great evangelist, but not so good in execution. As I said, I couldn't draw a circle in Photoshop...

Anyway, thanks for the advise...

chewy

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 5 years 33 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

a lot of problems with this site - on anything but Mozilla

There's more coming! Honest! Quite busy outside of the internet world at the moment, but I'm getting there...

Got the title sorted. Going back to what is on the site (rather than what I said before), simply add position:relative to the .pg-title-box-right class; and remove float:left from pg-title-box-left. Well that bit now works in IE.

I'll continue posting in dribs and drabs since if I leave it all till the end I won't remember what I changed...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 5 years 33 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

a lot of problems with this site - on anything but Mozilla

Individual story headers : bit more complex.

I removed the position:relative; from .content and the float:left from the .storyTitle. Thing is then, the <div class=storyDept> must come before the <div class=storyTitle> to get the floats right. Hope that bit isn't too much hassle...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 5 years 33 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

a lot of problems with this site - on anything but Mozilla

Same deal with the footers. Remove the float:left from the date, and move the name DIV above the date DIV to get it floating right.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

chewmanfoo
chewmanfoo's picture
Offline
Regular
North Texas, USA
Last seen: 10 years 40 weeks ago
North Texas, USA
Timezone: GMT-6
Joined: 2003-06-15
Posts: 21
Points: 11

Holy Crap!!!!

Ok ok ok ok! (Like Joe Peschi in Lethal Weapon 3)

That is amazing. I don't understand it, but it works brilliantly.

I feel like an aboriginal warrior seeing gunpowder for the first time.

Tell me, is this sort of wizardry second nature to you? How did you come to this knowledge?

I built the site piece by piece, when I needed a block to stick to the right, I used float:right;. How did you know that it was not necessary?

Thanks again!
chewy

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 5 years 33 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

a lot of problems with this site - on anything but Mozilla

Many, many hours of trying to get my site(Drunk working...

float:right is necessary, but in those cases float:left wasn't, as there was nothing in the middle.

The position:relative stuff was new to me, just fiddled around until something worked. Suppose I knew what it wasn't, so was able to mess with the rest.

You just pick things up as you go along. Like, if you have a DIV with two floats inside it and nothing else, that DIV won't show up unless you give it some content of it's own (the problem with your blue background subheads).

I also have waaaay too much time on my hands at the moment... Laughing out loud

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

kHiTe
Offline
newbie
Last seen: 18 years 15 weeks ago
Joined: 2003-06-06
Posts: 7
Points: 0

a lot of problems with this site - on anything but Mozilla

I find regular back ups of my CSS files and then messing arround with stuff you wouldn't think would matter is the best way to get Opera, IE, Mozilla compatability. Can't claim to be an expert tho.

insin
insin's picture
Offline
Enthusiast
Belfast, NI
Last seen: 18 years 19 weeks ago
Belfast, NI
Joined: 2003-05-07
Posts: 57
Points: 0

a lot of problems with this site - on anything but Mozilla

I recommend a good read of the Visual formatting model part of the spec, as it will help you to understand boxes are generated.

It's especially important to understand which elements will be removed from the normal flow and how that will affect/create your layout (see dJomp's post above about floats in a containing div - this happens because floats are taken out of normal flow - "In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float").

A Pedant Writes...
Into the mountain,
I will fall.