...

View Full Version : IE misplaces my div!



spietreser
12-19-2007, 11:12 AM
Hi,

I have a table-less design, that works in every browser except IE. The weird thing is that IE misplaces my entire menu and on some pages just one of the menu items.

Site: http://www.beeker.eu/demo/at/atadmin/home.htm
CSS: http://www.beeker.eu/demo/at/atadmin/main.css

Also (and this is a crossbrowser problem), I'm trying to change the color for the current menu item: class="active 'currentPage'". I just can't seem to get to the second class (currentPage) to change its color.

So my questions are:
1. How to get the menu placement right in IE.
2. How to change the menu item color for the currentPage class.

Please Help! :confused:

Thanks in advance,
spietreser

CFMaBiSmAd
12-19-2007, 11:16 AM
Before you worry about cross-browser problems, you need to correct the markup and css errors in your code -

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.beeker.eu%2Fdemo%2Fat%2Fatadmin%2Fhome.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.beeker.eu%2Fdemo%2Fat%2Fatadmin%2Fhome.htm&warning=1&profile=css21&usermedium=all

effpeetee
12-19-2007, 12:04 PM
Before you worry about cross-browser problems, you need to correct the markup and css errors in your code -

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.beeker.eu%2Fdemo%2Fat%2Fatadmin%2Fhome.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.beeker.eu%2Fdemo%2Fat%2Fatadmin%2Fhome.htm&warning=1&profile=css21&usermedium=all
There are no CSS errors.

Frank

CFMaBiSmAd
12-19-2007, 12:16 PM
There were at the time I posted, or I would not have bothered with the information. The quantity of markup errors has gone down from the point they were at when I posted as well.

The OP is obviously making corrections don't you suppose? :thumbsup:

effpeetee
12-19-2007, 12:19 PM
Sorry about that CFMaBiSmAd - it was rather unnecessary. Frank
=========================================
There is a significant error in this bit of code.

Line 56 approx

a href="/demo/at/atadmin/home.htm" title="Home" >Home</a></li>
<li><a href="/demo/at/atadmin/contact1.htm" title="Contact" >Contact</a></li>
<li><a href="/demo/at/atadmin/services.htm" title="Services" >Services</a></li><a href

Services</a><ul><a [/CODE - "<ul>" wrong.

should be as above. </li>

Frank

spietreser
12-19-2007, 12:44 PM
I am indeed working on the validation errors as we speak (just finished with the CSS errors). Thanks to CFMaBiSmAd for pointing those out.

About the ul / li error:
The CMS makes an unordered list within an unordered list to get a submenu. The code is as follows (looks right to me... maybe I'm wrong?):

<ul>
<li><a href="/demo/at/atadmin/home.htm" title="Home" >Home</a></li>
<li><a href="/demo/at/atadmin/contact1.htm" title="Contact" >Contact</a></li>
<li class="active 'currentPage'"><a href="/demo/at/atadmin/services.htm" title="Services" >Services</a>
<ul>
<li><a href="/demo/at/atadmin/administration.htm" title="Administration" >Administration</a></li>
<li class="last"><a href="/demo/at/atadmin/tax-advisory.htm" title="Tax Advisory" >Tax Advisory</a></li>
</ul>
</li>
<li><a href="/demo/at/atadmin/news.htm" title="News" >News</a></li>
<li class="last"><a href="/demo/at/atadmin/68.htm" title="About us" >About us</a></li>
</ul>

The code seems in line with http://www.w3schools.com/xhtml/xhtml_html.asp
So, I have no idea yet what is going wrong... your help is greatly appreciated!

Thanks,
spietreser

effpeetee
12-19-2007, 01:14 PM
The code seems in line with http://www.w3schools.com/xhtml/xhtml_html.asp
So, I have no idea yet what is going wrong... your help is greatly appreciated!

I have to agree with you. I had no idea of this order of coding. Well! we live and learn.

The original modification that I posted, tidied the menu up. I did not realise that it was two in one.


<li><a href="/demo/at/atadmin/administration.htm" title="Administration" >Administration</a></li>
<li class="last"><a href="/demo/at/atadmin/tax-advisory.htm" title="Tax Advisory" >Tax Advisory</a></li>
</ul> </li>
<li><a href="/demo/at/atadmin/news.htm" title="News" >News</a></li>
<li class="last"><a href="/demo/at/atadmin/68.htm" title="About us" >About us</a></li>
</ul>

Two </ul>'s with no closure </ul> between.

This had me puzzled.


Frank

spietreser
12-19-2007, 02:13 PM
Hey Frank, so I've already made a contribution to the forum, even though I joined today :)

About the color:
Is it wrong to have
<li class="active 'currentPage'">
instead of
<li class="active currentPage">

Could this be the reason why it doesn't work?

effpeetee
12-19-2007, 02:46 PM
You could have a look at this.

http://www.shivanjaikaran.com/examples/css_tabs/

http://www.alvit.de/handbook/

Every article that I have on Class shows the form <class="Something">

My site http://exitfegs.co.uk/Sources.html uses un-ordered lists. It also has many useful reference sources there.

What colour are you wanting to change, What class or div name is invovled.

Frank

spietreser
12-19-2007, 03:08 PM
Ok, I got the color sorted out!
Wrong:
<li class="active 'currentPage'">
Right:
<li class="active currentPage">

I changed it a bit, placed a <span> so I could assign a color to only the current menu item...

So now the menu placement in IE :confused:

effpeetee
12-19-2007, 03:12 PM
http://litmusapp.com/labs for CSSVista download.

With CSSVista you can manipulate the CSS of FFox and IE7 together and see the immediate result.
It's not perfecr but it is quite good and it's FREE.

Frank

See following post of mine.

effpeetee
12-19-2007, 03:27 PM
Do this;

#AT_leftColumn{
width: 280px;
height:10&#37; or whatever height is best.
float: left;}


Some Divs need a height in IE.

Frank

spietreser
12-20-2007, 03:56 PM
Thanks for the suggestion, but that didn't work. I finally got it right in IE (floating the AT_columnBox_content to the left), but now it's looking weird in FF! *sigh*

I hope FF is easier to fix, heh.

effpeetee
12-20-2007, 05:06 PM
.AT_columnBox_content{
padding: 10px 10px 0px 10px;
margin: 0px;
min-height:5%;
border-left: solid 1px #CECECE;
border-right: solid 1px #CECECE;
border-bottom: solid 1px #CECECE;}

This seems to fix it in my editor
http://www.greywyvern.com/code/min-height-hack

Frank

Picture after a few html changes.

spietreser
12-20-2007, 05:43 PM
Frank, you are a genius!!! I would have never found this without your help. I didn't see the min in min-height earlier (I didn't even know that existed!). :o

It finally works! I changed it on the live website, will synchronize with test server later.

THANK YOU

effpeetee
12-20-2007, 05:55 PM
It's a pleasure, but what little I know, I have learned from the other good people on this forum, I am far from being a genius. I am just persistant.

Frank

http://www.exitfegs.co.uk/index.html

spietreser
12-22-2007, 02:17 AM
Ok, actually it works now in all browsers except IE6 and lower. Argh...

effpeetee
12-24-2007, 07:14 PM
Ok, actually it works now in all browsers except IE6 and lower. Argh...
This link may prove of interest.

Frank

IE's bugs http://www.webmasterworld.com/forum83/4161.htm

spietreser
12-25-2007, 12:55 AM
Once again, thank you!

That post was an amazingly great find! All IE display bugs can be solved with display: inline-block;. Excellent :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum