Site Reference Forums

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.

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.

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.

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

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

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

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)

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.