It is probable the answer to my problem lies somewhere within these archives but I was unable to locate it...

I have set up a template page for a client site located at www.jaywalkersjamband.com/template.html.  For the life of me, I cannot correct the imbalance of the right column when switching between Internet Explorer and Firefox.  In IE, it shows up a few lines shorter than the left column and in Firefox it shows up a line longer than the left column.  In an effort to compensate/disguise the problem, I deleted my custom footer background and simply left the background black and stretched the text across the screen.

Am I stuck with this problem or is there some piece of script or HTML programming I can insert to correct this?  I seem to recall there might be some sort of work-around...

Thanks!

MajorMelody wrote:

It is probable the answer to my problem lies somewhere within these archives but I was unable to locate it...

I have set up a template page for a client site located at www.jaywalkersjamband.com/template.html.  For the life of me, I cannot correct the imbalance of the right column when switching between Internet Explorer and Firefox.  In IE, it shows up a few lines shorter than the left column and in Firefox it shows up a line longer than the left column.  In an effort to compensate/disguise the problem, I deleted my custom footer background and simply left the background black and stretched the text across the screen.

Am I stuck with this problem or is there some piece of script or HTML programming I can insert to correct this?  I seem to recall there might be some sort of work-around...

Thanks!

Actually I had discovered an easy CSS hack just yesterday that might do the trick. I'm not sure exactly how to fix your problem but there is indeed a way to set properties only in IE and vice versa. I wrote the article here:

http://xperiment.programming-designs.co … _hack.html

Using the applied method in the example provided at that link you can set margins/padding specifically for IE or for non-ie browsers. Let me know if you find a way to use this trick.

Well, G'day MajorMelody.

You seem to have made quite a splash on the forum. Looks like you're here to stay. Welcome.

Don't know if you're aware, but you seem to have a couple of problems with the template:

1)  In IE6, your animations: top left, top right and bottom left, aren't loading properly but they're OK in FF.

2)  In IE6, the bottom of the page is OK except for the height discrepency that you mentioned, but in FF it's all up the spout. There is a flag background sticking out of the bottom and the text is missaligned with the grey bar. This grey bar isn't there in IE6.

I note that your code is valid.

I think that what you need isn't a workaround. Rather, there may be some problem with the way you have your divs in the css file. Perhaps something to do with border or padding. Maybe to do with the flag background image.

I'd try removing the background image from the css file as a starter and see how it goes. Might give you a clue as to the problem.

Can be infuriating, huh?

Regards,
Laurie.

What I'm noticing is very minor differences in spacing between everything in those columns.  These are adding up in the end.  You may want to try setting specific margins and padding to control the variance between how the browsers display by default.  For the most part you should be able to set your own defaults for each type of object.

Really really easy

use this global style

* {
     margin:0;
     padding:0;
}

step 2 - design for firefox. forget IE even exists

step 3 - tweak for IE, using this is you really have to

  <!--[if IE]>
   <style type="text/css">

   </style>
  <![endif]-->
 

call it at the bottom of your html head tag, that way it over-rides any previously declares class/id styles (ie cascades). Great for changing the varius margin differences between FF and IE

Northie wrote:

Really really easy

use this global style

Code: css

* {
     margin:0;
     padding:0;
}

step 2 - design for firefox. forget IE even exists

step 3 - tweak for IE, using this is you really have to

Code: html

  <!--[if IE]>
   <style type="text/css">

   </style>
  <![endif]-->
 

call it at the bottom of your html head tag, that way it over-rides any previously declares class/id styles (ie cascades). Great for changing the varius margin differences between FF and IE

much easier to use the method i specified in my post, eg:

div#whatever{
        margin: 5px;
        padding: 5px;
        //margin-top: 0px;
}

That would set the top margin for div "whatever" to 0 only in internet explorer. no need for the conditional if/endif statement.

I would like to thank you also for posting how to set different css styles for different browsers.  I have some pages that I am working on that are just doing some plane funky things between IE and FF.  I ended up setteling for something that wasn't quite what I wanted, but close. 

What you just posted might help me tweak it where it is exactly what I want.

Again, thank you.

Dan

Im having the exact same problem with IE/FF, with FF my drop down menu works perfect over my DIV's, but in IE, it only drops down as far as the DIV's and bits of the menu are blocked out etc.

The same is happening with things like alignment, FF is fine, but IE isnt.

Would anyone be able to help me if I was to email them the coded page, css, etc. ?

If so please PM me, etc.

I am willing to return the favor or I may have something of interest to you.

Thanks in advance.

Steven

os2-systems wrote:

Im having the exact same problem with IE/FF, with FF my drop down menu works perfect over my DIV's, but in IE, it only drops down as far as the DIV's and bits of the menu are blocked out etc.

The same is happening with things like alignment, FF is fine, but IE isnt.

Would anyone be able to help me if I was to email them the coded page, css, etc. ?

If so please PM me, etc.

I looked at your HTML coding and it's somewhat of a mess; your CSS doesn't appear to have anything set-up correctly for viewing in Internet Exploder.

The issue is most likely in the p tag underneath your left column that does not exist in the right

WIth div's they are treated as independent units - unless you trick the columns they will only fill up the space needed and FF does not acknowledge height in the same way as IE , so that will not fix it - I cannot remember exactly myself but easy to look up - but for now you might try removing the extra paragraph at the bottom of the left column and seeing if that works for you -- if not try to locate the fix for column height .. hope this helps

I just went through my own little war with this IE image compatiblity issue...at least that was the final word.  In a template that I was/am designing for a client, the .png logo would not show up in IE, but the .jpg background image would - after I set the joomla site for friendly urls.  Before that...everything was fine.

None of my geeky server buddies could help me figure it out, so I eventually just pasted the logo to the background pic, removed the logo image from the configuration settings and called it a day.

Now granted...I am not a wiz at this stuff like Northie is - who knows how to always force them to get along, but why can't these GUI inventors learn to play together?  What would seriously be the harm?

*Perhaps a whole different topic to argue 

Y'know, I feel silly that I didn't think about it before, but you could put a second wrapper div around that whole area, then add a background image to each div using an image the same width and color as your sidebars but 1px tall.  you would use something like the following to set the images:

#wrap { background:#000 url(images/sidebar.gif) repeat-y left top; }
#wrap2 { background:#000 url(images/sidebar.gif) repeat-y right top; }

This would have the effect of extending both sidebars down to the bottom of the divs

Hi, Im trying to use the drop down menu which is on my homepage which is on my profile, etc., but this is the link to the new style layout code http://www.os2-systems.co.uk/demo.htm, Im trying to incorporate the drop down menu in the Top Div.

Hello All,

My solution would be to have two CSS style sheets. One for w3dom class browsers and one for IE.

If you're coding is XHTML 1.0 and CSS compliant than it will be viewed properly in all modern browsers including the new IE 7 !

" Programming-designs " is very much on track.

Name The first Style sheet -- mozstyle.css
Name that second style sheet -- iestyle.css

Code for FireFox first.  Then tweak for IE 5. Essentially the iestyle.css is a copy of the mozstyle.css with
a few different values to make the page work in IE5.

<!-- The file with the moz style sheet works for all browsers including IE 7-->
<link href="mozstyle.css" rel="stylesheet" type="text/css" />

<!-- The file with the IE5 style sheet works only for IE 5 browsers eXcluding IE 7-->
<!--[if lt IE 7]>
    <link href="iestyle.css" rel="stylesheet" type="text/css" />
<![endif]-->


Then it will work all the time in all browsers (except ns4 which I don't code for anymore)

Regards,

Todd (Gannyaa)

I also find it strange when I validate this; http://www.os2-systems.co.uk/demo.htm, it validates fine, but when I add some more stuff it goes crazy with errors.

G'day os2-systems.

This has got quite confusing.

I sugest you delete your two posts and start a new thread to deal with your questions.

Regards,
Laurie.

You know, I posted this a few weeks ago and it was still coming across as a foreign language to me...until tonight.  I "bandaged" the original site issues I started this thread with and was asked to do a new website facing similar incompatibility issues.

I must admit that I still don't understand exactly how the IF/Then statement works, but having 2 different CSS sheets saved me a world of time...and subsequent hurt.  I think someone mentioned start with a sheet that works in Firefox, save it and then tweak the other one to work in Internet Explorer, which is what I did and I'm happy with the "work smart, not hard" balance such a strategy offers someone of my limited CSS knowledge.

I couldn't grasp how to place the // marks in the CSS sheet, and that is on me so maybe the other suggestions work as well.  Regardless, thank you to everyone who contributed to this thread.  Twice it has provided quick and direct assistance!