CSS Help

[EC]

Ok. So I had this site launched all nice and pretty like, tested it, looked great in all browers ...

Then my client wanted the content area to be a little wider. So I "widened" the main column with the graphics, tweek the stylesheet and tested it, looked great.

But like -- so wierd. Today I look at this in IE and the top banner is not displaying the full width in IE and the content is not wide enough and the background tile is too narrow too!

OY. It's the end of the day but I thought maybe I could throw this out there and see if any of you CSS geniuses have any thoughts.

http://casadelogo.typepad.com/factesque/

CSS is here http://casadelogo.typepad.com/factesque/styles.css

[Roo-1]

I don't have time to pick through code, but running things through the validator show errors in both the code and the css.

Closing the image tags incorrectly for one thing....you've closed them like this:

<img src="image.jpg" width="???" height="???" alt="Alt text" title="Title text" border="0"/>

When XHTML wants you to close them like this with a space before the closing:

<img src="image.jpg" width="???" height="???" alt="Alt text" title="Title text" border="0" />

Try correcting all of the errors in the code and the css, and keep running things through the validator until things validate and see what happens:

Your coding errors. (http://validator.w3.org/check?verbose=1&uri=http%3A//casadelogo.typepad.com/factesque/)

The CSS Validator (http://jigsaw.w3.org/css-validator/) (You can't validate the CSS until the XHTML validates)

[EC]

Right, but that's in the content -- completely out of my control. I am just looking for help on the CSS. This is a blog, all I've done is modified the stylesheet. All of those XHTML errors are from the client's content.

But strange that it was all fine and dandy the other day, then after I revised it ... poof!

Broke in IE. :( Gggrrr.

But thanks anyway, appreciate your time.

[imagemaker]

I would first make sure I was getting the latest posted version and not something from 'cache'.

I use GoLive and have found that sometimes all the data does not get removed. I'll 'Select All' for the characters, place them in 'Word' to strip out the code, and copy it again. I'll then go to the table cell in the code and remove anything else OR delete the row or column of the table, and reinsert it, then replace the text and re-assign the style sheets. Basically, I remove the malfunctioning section, and replace it. That will usually get rid of any remnant code.

It’s a pain in the but, but it DOES usually get rid of lingering conflicting instructions. Kind of like removing stray points is Illustrator.

I’ve heard people say that the code GoLive writes is not very clean, and usually needs cleanup. When a web ‘pro’ looked at the code, he said it was ‘quite clean’ before learning that I used GoLive. So I won’t say I’m doing something ‘right’, but that process apparently is doing something that works.

I also had a nightmare with space-bar and upper-case characters in Style Sheet names. As I remember, those especially caused trouble in IE but not Mozilla or iCab (I am running a Mac Blue & White G3/450 with OS 8.6).

Let us know what you find.

[EC]

I will see if I can find something in the morning. I don't think it's a cache problem because I only saw that error after I restarted my computer today.

Basically we started with a basic typepad account so I couldn't get to the index, I just worked with an existing stylesheet and reworked it. There might be some sloppiness there that I didn't catch. Normally I do what you do -- I code mostly by hand and write from scratch.

Thanks for the advice, I think I need to sleep on it first or I might scream. lol

[benjo]

EC you really need an archive cause this page is looooooooooooong. Besides that I'm on a Mac and use a real browser so I see everything Aokay.

Put something like IE useres look in your title and people get the hint really fast.

[Ulysses]

EC, the whole design doesn't flush to the width of the page, in any browser I tried. It seems your background only fills upt oabout 1024px wide. I've attached what I see (forgive the compression and resizing).

Am I right in assuming that the whole pale column, should be flush to the right side of the page, so the background doesn't appear on the right? or should JUST the banner flush to the right?

[EC]

Ok Ulysses, that little adventure (setting my monitor higher than 1024) took me on a one hour journey into the Dell phone tree and technical support (apparently I clicked my monitor settings too high and my monitor doesn't support that setting -- So I got BLACK SCREEN. lol)

Anyhoo -- this is how it is supposed to look:

http://casadelogo.typepad.com/casadelogo/ (This is the staging area/test folder)

Now over here, it's all wonky ... but I am using the same exact stylesheet and absolute paths to the graphics.

http://casadelogo.typepad.com/factesque/

I am beginning to think it's not me.

But thanks for pointing out the white gap to the right on higher screen resolutions, I had set an orange background but forgot the "#" :) I am not going to be testing that though, I am not a fan of the black screen. lol

[EC]

It seems to be working now. If I continue to have problems, I am contacting the host. :)

Thanks everyone.

[Ulysses]

EC .. so sorry you had trouble changing your screen res. You using an LCD by any chance?

Glad it is working now though ... saves me having to look at the code again (god, I can be so lazy) ... and you too, lol.

[EC]

Yup LCD. :)