Frustrated with CSS in IE...

[ristenk1]

I've been using conditionals to link my internet explorer css external links. That has been working fine. My problem is that in IE my pages aren't rendered the same on different monitor sizes...but my pages seem to be fine in firefox and chrome (I haven't checked others on differnt window sizes). I thought I would be fine using EMs....but I guess I'm wrong. Please Help!!!

www.baltimoresbesttreeservice.com - this is the site.

Kristen

[morestar]

...well i just checked your site on IE8 and really couldn't tell if it rendered right in your eyes...then i checked/compared your site in FF and Chrome and in all three browsers it rendered pretty much uniformed...

I have an idear, why don't use use tables for your layout and css to style elements rather than positioin them? That way you have a 99% chance of your site rendering the same in all browsers AND you'll have a much easier time editing the layout in the future? You or your future developer...

[morestar]

anyways, I found this page:

http://www.baltimoresbesttreeservice.com/secondary_pages/services.html

Another little tip for you that would help you in the search engines would be to rename that page to Tree-Pruning-Services.html or Tree-Services.html...

If you install Google Analytics on your site or sumbit your site to Google Webmaster Tools you can see what keywords are being used to find that page (and other pages on your site) and you can then determine a better name for that page...

For the ourwork.html page, you could also name it Our-Tree-Services-Work.html.

Naming your page with keywords is a good practice, especially if you can do it naturally...

would you like me to do some seo for you for free !!?

[martyn-it]

1) Which version of IE are you talking about ?

2) You are always going to struggle as the template uses absolute positioning and the browsers all implement it slightly different

3) Why is everything in a Div of it's own ?

4) In Chrome, FF and IE 8 it looks ok - in IE it looks a bit odd

Martyn

[jannmirch]

I am seeing the page correctly in FF but the box1 div stuck up at the top in IE7.

Without seeing the CSS, which should be setting the placement of the Div, you won't be able to get any useful advice.

I will say that you've got everything set in a separate DIV which will makes the coding very clumsy and the requisite CSS very difficult to control. With such a simple layout, you shouldn't need any hack really. Clean coding will do the job for you.

Check out Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! to find one that matches the layout you want and then start adding your content. Layout 39 I think will fit the bill. You have your header, the top content, which would be your image and two columns below.

I also recommend you do some reading on HTML at Dave Raggett's Introduction to HTML This will help you understand how to create good, clean code, which will make placing and styling your content easier.

And there are lots of good CSS tutorials around as well. You'll want to check those out as well.

Good luck. Dealing with multiple browsers and a variety of versions is always loads of fun!

[fieldsimc]

Many people may not fully agree with what I'm about to say. Especially if they're still concerned about catering to users of IE6. But, for compatibility between firefox 3.0+, IE7, IE8, and Google Chrome, I have found, that setting a margin:0px auto; padding:0px;
on your div's and float:left; will cause your page to render exact in all the browsers concerned. I've done this on many a site without a problem.

Hope this helps.

[morestar]

Originally Posted by martyn-it

1) Which version of IE are you talking about ?

2) You are always going to struggle as the template uses absolute positioning and the browsers all implement it slightly different

3) Why is everything in a Div of it's own ?

4) In Chrome, FF and IE 8 it looks ok - in IE it looks a bit odd

Martyn

That's why I very rarely use CSS for positioning - it's a complete waste and really does no one any good. using tables for layouts are great and usually keep the sites appearance uniform in all browsers...

i use css for background colors, background images, font styles, padding maybe, sometimes margins and my sites and client sites are right delighted ! : )

[andrew-bkk]

Originally Posted by morestar

That's why I very rarely use CSS for positioning - it's a complete waste and really does no one any good. using tables for layouts are great and usually keep the sites appearance uniform in all browsers...

Using CSS for positioning is not a waste if it's done properly.

I agree that tables are not necessarily always bad, but they rarely provide the same level of control over presentation as well written CSS does

[morestar]

Originally Posted by andrew-bkk

Using CSS for positioning is not a waste if it's done properly.

I agree that tables are not necessarily always bad, but they rarely provide the same level of control over presentation as well written CSS does

i would say that's a complete farce but you DO have your opinion...

the funny thing about CSS positioning is that it can never be 'done right'. it's just done the way it 'works' for the developer.

tables are straight forward.

[Tarzan2]

Originally Posted by morestar

That's why I very rarely use CSS for positioning - it's a complete waste and really does no one any good. using tables for layouts are great and usually keep the sites appearance uniform in all browsers...

i use css for background colors, background images, font styles, padding maybe, sometimes margins and my sites and client sites are right delighted ! : )

I gave up on CSS for positioning as well. I struggled for the longest time and then just resorted back to tables to 'get the job done'. I find the mix worked best for me (but I'm just a novice at CSS).

[morestar]

Originally Posted by Tarzan2

I gave up on CSS for positioning as well. I struggled for the longest time and then just resorted back to tables to 'get the job done'. I find the mix worked best for me (but I'm just a novice at CSS).

yes sorry but 99.987% of clients and our bosses DO 'want the job done' and don't bother caring if it passes the suggestions of the W3.

I guess I could say (but I won't) that I'm novice at css as well cause now all I use it for is to style my text, add some padding here and there, maybe a margin or two and background images...

i DO however, try my best to keep most of my styles in a separate sheet but many times i find myself using inline styles because many of my html elements are includes (such as the header, footer, main/secondary navs) so I only have to code/edit once anyways...

but no matter what I never use only CSS for layouts - it's just a waste of time.

I work with one partner most of the time whom still thinks using tables is the 'old school' way lol and the best part of my day is seeing him struggle his ass off trying to get his 'divs' to work in all browsers, staying up late at night or late after work trying to get his divs to work so the client can get his site before he leaves.

the other awesomely funny part is when he later goes to add new content somewhere that the client has asked for and his new content ends up rendering on top of his old content rather than rightfully pushing it down as one would expect.


"Frustrated with CSS in IE..."

Ya, the best thing to do is draw your layout in a graphics program or take a screen shot of the website layout you like, cut it up in your graphics program (ImageReady/PhotoshopCSx) and get the HTML, center the container table on the screen, hit CTRL S (save) and check your work on all browsers and you'll find it renders nicely 100% of the time.

[ristenk1]

I do need to clean up my code with all those divs. The site was created a bit ago and I'm just getting back to it as I didn't realize this major problem before.

I think I've come up with an answer although I'm not sure how to implement it (it's not working correctly as it is suppose to) - This is what the w3 site says about cross-browser compatibility issues:

There is a bug in Internet Explorer's handling of margins for block elements.
In IE, block elements are sometimes treated as inline content. This is particularly problematic when it comes to centering.
For centering to work in IE, use the text-align property.
To avoid this affecting the text in the original <div>, add a new <div> as a container with text-align:center, and reset the text-align in the original <div>

(CSS Horizontal Align)



It makes sense for what I am seeing in the IE7 browser but I can't get the hack to work Anyone done this before?

[ristenk1]

The same thing happened to another site I have. The code it a little cleaner...maybe someone can make sense of this:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<LINK REL="stylesheet" HREF="template.css" TYPE="text/css">
<LINK REL="stylesheet" HREF="index.css" TYPE="text/css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="template_ie.css" />
<![endif]-->
</head>
<body>
<div id="holder">
<p id="column1a">

etc.

CSS FOR IE

#holder{
text-align:center;
}

p#column1a {
position:absolute;
font-size:17px;
font-family: Helvetica, arial, sans-serif;
color:#424242;
left:3.5em;
top:22em;
width:15em;
text-align:left;
line-height : 1.5em;
}

etc.


As you can see I put the text-align:center in the syle sheet that the w3 was talking about...but it didn't work. Didn't work. I tried putting another div to wrap around the elements within the holder and setting them to text-align:left like talked about above. But still didn't work.

It feels like the righkt track but it's still broken. I've also read something about IE7 being effected by quirks mode but that doesn't seem to fit because I have a DOC heading that should make it standards complient. Still so frustrated.

Kris

[morestar]

Originally Posted by ristenk1

This is what the w3 site says about cross-browser compatibility issues:

There is a bug in Internet Explorer's handling of margins for block elements.
In IE, block elements are sometimes treated as inline content. This is particularly problematic when it comes to centering.
For centering to work in IE, use the text-align property.
To avoid this affecting the text in the original <div>, add a new <div> as a container with text-align:center, and reset the text-align in the original <div>

ya the text align property my ass. it doesn't work the way you want it to a 100% of the time so I just <tag align="center"> and it always works! YAY EH !!

Listen, who cares what the WC says, I'm so sorry and I know many will despise me for writing this but damn - if it works in all browser then what's the problem? Can someone tell me what's the problem with NOT making our coding sessions so painful by using CSS for positioning when tables work just fine? I need to know...

Tell me, who cares what the W3 says, I digg what W3 is trying to do overall. It would be GREAT if all browsers rendered HTML/DIV/CSS the same way but....and it would be GREAT if DIVs always worked the way you expect them to but....

[morestar]

Originally Posted by ristenk1

I've also read something about IE7 being effected by quirks mode but that doesn't seem to fit because I have a DOC heading that should make it standards complient. Still so frustrated.

Kris

IE8 has a Compatibility View (quirks mode?). You may be referring to that I don't know....

I got frustrated ; ) trying to see what you were doing with that code up there....

Tell me, did you get an image copy of your site? or are you coding everything from scratch?

Actually just looking at your site again I can see that you're doing it from scratch.

I got an idear....find a site that you LOVE the layout of and would LOVE your site to look like.

Then PM me the link please or post it here.

OH yes, your description meta tag, it's kinda keyword'ish rather than a call to action. In your case I would start your description meta tag with:

"Find all your tree pruning services in Baltimore & Harford. We're a fully licensed and insured tree removing company in Baltimore that prunes, fertilizes and offer tree pesticide services at competitive prices.

No? I see your description almost laid out in a keyword sequence.

And your keywords:

balitmore, tree,pruning,cutting,removing,harford,pesticide,se rvices,shrubs,storm,damage

Simple...

Are you willing to take on another design which with our help could take you less than an hour if we play our cards right? All you'd need to do is paste the copy into the right pages...

you page for services is named: domain.com/secondary_pages/services.html

re-name this page to Baltimore-Tree-Trimming-And-Removal-Services.html

Our Work: secondary_pages/ourwork.html

change to domain.com/Our-Tree-Trimming-And-Removal-Work.html

Who we are (secondary_pages/whoweare.html), change to About-CompanyName.html and change the link text to About (company name)

You don't have a company name?

The blog is cool. Keep it up and link from it to some of your NEW pages from within the post copy! with proper link text like, actually i took a peek at your second post. It's got'a good link to your homepage. Make more though to all your pages, do it up !!

Please make these changes ristenk. You'll be so happy you did and so will the company.

So again take a look at a few visually/graphically appealing sites that you would like your site to look like and send me the link. I'll help you from there....

P.S. If you make those page-name changes before we throw up a sweet new template you should 30 redirect those old page names ie. secondary_pages/whoweare.htm to the new pages....

[rob.b]

Check the resolution or size of your page. Sometimes that causes the problem when being compressed forcefully by the browser.