19 replies [Last post]
mixmanner
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2006-09-14
Posts: 25
Points: 0

The site is www.mysublime.com/site.php?section=about

Everything looks peachy in FF and Safari. And IE it looks fine on the About page and the Weddings page. But on the contact page the content div isn't expanding to encompass the Flash part. Oddly enough, in IE 6 it looks almost perfect when I click on contact, but if I refresh the page the div collapses below the bottom of the Flash gallery. I tried everything I can think of but couldn't figure out. Anyone know the trick?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Tips:

1) Drop dwn to Xhtml 1.0 or HTML 4.01 strict.

2) Ditch all the inline styling, it makes debugging a nightmare.

3) Cut down on your use of divs!

Verschwindende wrote:
  • CSS doesn't make pies

mixmanner
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2006-09-14
Posts: 25
Points: 0

1. Will dropping down the

1. Will dropping down the XHTML 1.0 fix the problem? If not I'd rather use 1.1.

2. The inline styled parts are there because my client wanted certain things to be dynamic, like a difference background depending on which section of the site is you're at. I wasn't aware of a way to change those using an external style sheet, but admittedly I didn't look into it very hard. Is that possible?

3. I do notice myself using a lot of divs sometimes, but I thought they were all necessary. What are some that I could get rid of?

Thanks for your help!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

mixmanner wrote:1. Will

mixmanner wrote:
1. Will dropping down the XHTML 1.0 fix the problem? If not I'd rather use 1.1.

Might do. IE has problems with 1.1

Quote:
2. The inline styled parts are there because my client wanted certain things to be dynamic, like a difference background depending on which section of the site is you're at. I wasn't aware of a way to change those using an external style sheet, but admittedly I didn't look into it very hard. Is that possible?

Yes, using IDs and classes. That's the whole point of CSS Wink

Quote:
3. I do notice myself using a lot of divs sometimes, but I thought they were all necessary. What are some that I could get rid of?

http://csscreator.com/divitis Wink

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

mixmanner wrote:1. Will

mixmanner wrote:
1. Will dropping down the XHTML 1.0 fix the problem? If not I'd rather use 1.1.

Can you explain why you'd rather use 1.1? and no dropping down to 1.0 will likely not fix anything but then it's not the reason you should do so and must do so.

mixmanner wrote:

2. The inline styled parts are there because my client wanted certain things to be dynamic, like a difference background depending on which section of the site is you're at. I wasn't aware of a way to change those using an external style sheet, but admittedly I didn't look into it very hard. Is that possible?

The last thing inline styles are is dynamic unless you have set them via scripting, always avoid inline styling! unless there is a very good reason to be using it, and those are few and far between, if you need different styles dependent on the page you're on then add a hook to the html or body tag of each page to identify it uniquely and then style using descendent selector styling in an external stylesheet.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mixmanner
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2006-09-14
Posts: 25
Points: 0

Sorry, I should have been

Sorry, I should have been more specific. I'm using PHP to change the background color by using inline styles instead of setting it in the external style sheet. I suppose I could set different classes/IDs, and use PHP to select those, but that's essentially the same thing, and more lines of code than the way I'm doing it now.

Ha, thanks for the link to divitis.

mixmanner
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2006-09-14
Posts: 25
Points: 0

Well, there's no reason I

Well, there's no reason I have to, I'd just never had any problems using 1.1 before. If I understand that last sentence of the first paragraph you're saying I must do so? What's the reason though?

Yeah I was setting them via scripting. Can you give me example of the hook/descendant selector method? Thanks!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

mixmanner wrote:Well,

mixmanner wrote:
Well, there's no reason I have to, I'd just never had any problems using 1.1 before. If I understand that last sentence of the first paragraph you're saying I must do so? What's the reason though?

First xhtml 1.1 must be served by the server as xml, not text/html. But if you do that IE6 can't handle it at all, and it's still the majority browser out there, alas. Second the xml declaration in the first line is required for 1.1 but that puts IE6 into quirks mode where it renders things differently and wrongly, particularly heights and widths.

If you don't serve it with the right mime type it is not xml and not xhtml 1.1 no matter what your file looks like, and if you do IE6 can't handle it. Not ready for prime time.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

mixmanner wrote:Well,

mixmanner wrote:
Well, there's no reason I have to, I'd just never had any problems using 1.1 before. If I understand that last sentence of the first paragraph you're saying I must do so? What's the reason though?

If you check the specs XHTML is meant to be delivered as mime type application/xhtml+xml this is relaxed to allow 1.0 to be served as text/html but only 1.0 which to many is a nonsense anyway and would argue that html4.01 strict should be used . This is all to do really with understanding just what these various DTD's mean and how they relate to mime types which I'm afraid few do. xhtml 1.0 or 1.1 there is no appreciable difference and nothing gained especially when serving as text/html, but then again perhaps you are content negotiating?

mixmanner wrote:

Yeah I was setting them via scripting. Can you give me example of the hook/descendant selector method? Thanks!

Place a hook/id on a upper level tag and then use descendent selectors to target your rulesets

body#index #content {color:red;}
body#about #content {color:green;}

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mixmanner
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2006-09-14
Posts: 25
Points: 0

I'm sorry, I'm probably

I'm sorry, I'm probably misunderstanding, but isn't that essentially the same thing I'm doing now? Aren't I just setting the ID via scripting as opposed to the color value?

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 11 years 38 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

Easier updates that's why

Not at all the same thing,

By doing it your way, you'd have to repeat the code for each attribute that you'd like to set, by setting an ID or class you can simply edit the css file.

For Example:

What if your customer decides he wants blinking Cyan text on a yellow background with -3 pixels for the letter spacing?

After you're done barfing because it'd look horrid, you'd have a simple edit using the solution mentioned. Without it, you'd be looking at a good bit of programming.

Hope that helps,

LokiLoks

mixmanner
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2006-09-14
Posts: 25
Points: 0

I think we're having a

I think we're having a misunderstanding. I do get the concept of CSS.

Right now I've got something like this:

;">

I would much rather not use inline style, and put it in the external style sheet, but of course then I wouldn't be able to change the color based on which section of the site you're at. Unless someone knows a way I don't know?

Now Hugo mentioned a trick that I don't exactly understand (I'm decent with CSS but not a guru). As I understand it (which I probably don't), he's saying I should do something like this:

;">

And then have a

body#about { color: red; }

in the external stylesheet. What I'm saying is that even though that might be more stylistically correct, isn't it essentially the same thing? Again, thanks for everyone's help!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

mixmanner wrote: I would

mixmanner wrote:

I would much rather not use inline style, and put it in the external style sheet, but of course then I wouldn't be able to change the color based on which section of the site you're at. Unless someone knows a way I don't know?

It's dead easy, just give your BODY elements and ID and then use CSS rules to style elements for each ID.

So for example:

body#normal {background: #fff none;}

body#dark {background:#ccc none;}

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 11 years 38 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

Your example is correct,

Your example is correct, except for the ; in the id

">

Just in case it isn't obvious, your external stylesheet will have all of the sections, not just about.

body#about { color: red; } body#contact { color: green; } body#jobs { color: cyan; } body#products { color: yellow; }

I understand that you're not a novice with CSS, but your statement that it's the same thing is incorrect. Your method forces you to use PHP to generate each characteristic every time. Hugo's method uses PHP once. The result may be the same but the implementation is significantly different for future changes.

Hope that helps,

LokiLoks

mixmanner
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2006-09-14
Posts: 25
Points: 0

Ahhhhh, I get what you mean.

Ahhhhh, I get what you mean. I just wasn't seeing it, now I understand. Thanks for your help!

So the IE height bug seems to have been forgotten. Does anyone know what might be causing that? Is it because the tag is interpreted different by IE? I tried wrapping it in a

but that didn't work.

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 11 years 38 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

Ok, as one of the earlier

Ok, as one of the earlier posts suggested, cut down on your use of divs.

Let's break your design apart:

By putting the whole content in a wrapper you can drop other divs later on, at least that's my preferred method to center on the page etc. I'd start with that. You can even put the watermark in it.

You have a header div with 1 image (header_green.png) across the top and two h elements followed by red_green.png in its own div. No need for the second div.

Using any standard image replacement technique, you can just use h elements and a p with css image replacement for these image based text items. My preferred method is the -9999px text indent, but use what you want. Do a search for css image replacement if you need more info.

So, you'll break the image apart and replace the h1 with the Sublime, the h2 with Wedding & Event Planning, and a p with the phone #. Bonuses: The 3 images will also be smaller than the one banner and you'll be including the phone # in the source code so that searches can index it and page readers can see it. Accessibility doesn't hurt. Also you could add a link so you can click on the logo to go to the home page and go to the contact page with a click on the phone #.

Now that those three things are done, Set the background for the header div to be that red_green.png image and bottom left position. Of course you'll need to set the height, but that's pretty much it.

Next put in your navigation div floated left and your flash div floated right.

I prefer to use tamed lists, but to each his own. Also, for rollovers I'd use hover: instead of javascript image replacement, at the very least I'd change to javascripting the image position and use 1 image to prevent flicker and remove the need for image preloading. Take a look at http://wellstyled.com/css-nopreload-rollovers.html and others you find using google and the search criteria "one image" rollover.

The rest of your body content except the footer should simply be p and h tags with another image replacement for the signature if it's there.

Once you get to the footer, simply set it to clear both and you should be fine.

I'm sorry I didn't come up with a real answer to your question other than a complete rework, but you'll find that by dropping down to 5 divs you'll probably avoid a lot of these issues.

Let me know if you need any more help.

Feel free to email me directly at designs *at* krugercreations *dot* com.

Hope that helps,

LokiLoks

mixmanner
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2006-09-14
Posts: 25
Points: 0

OK, I revamped the whole

OK, I revamped the whole thing based on your suggestions and the divitis article. I couldn't do everything you suggested (stuff with the images), because I basically spent my entire budget fixing the idiot desginer's design, and now I'm working for free. However I will be sure to do the images that way on the next project.

Oh, I took out the content div, but then I couldn't figure out where to set the background as white. It couldn't be the body, nor the

, because that left gaps in the white. I concluded that I need to wrap the nav, gallery, and content areas in one div in order to get the background all white. Maybe there's another way but I didn't see it.

I haven't had a chance to take a peek at it in IE7, but in IE6 it's still refusing to encompass the gallery. I'm thinking it has got to be something about the way IE sees tags. My code was pretty messy before, but it's fairly clean now, and I just can't see what the error on my part could be. What do you guys think?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Which page is it? Same link

Which page is it? Same link as before?

If so, looking ok. The navigation should be a list, with image replacement like you've done with the H1 and H2.

The footer still needs a bit of tidying up.

The links in the footer need to be underlined or nobody will know they are links - unless that's what you want to achieve?

Verschwindende wrote:
  • CSS doesn't make pies

mixmanner
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2006-09-14
Posts: 25
Points: 0

I'll do the image

I'll do the image replacement on my next project, the idiot designer who my client used exhausted her budget, so now I'm working for free. As such, I'm doing just the minimum to fix the IE issue. Yeah, I told her that making the links invisible was the dumbest idea ever. Her answer was "if they're smart enough, they'll figure it out." Ugh, I hate her.

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 11 years 38 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

Also be sure to do the same

Also be sure to do the same thing (clean up the code) for the other pages