Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Arrow IE misplaces my div!

    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!

    Thanks in advance,
    spietreser

  • #2
    Senior Coder CFMaBiSmAd's Avatar
    Join Date
    Oct 2006
    Location
    Denver, Colorado USA
    Posts
    3,108
    Thanks
    2
    Thanked 326 Times in 318 Posts
    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=ht...Inline&group=0

    http://jigsaw.w3.org/css-validator/v...usermedium=all
    If you are learning PHP, developing PHP code, or debugging PHP code, do yourself a favor and check your web server log for errors and/or turn on full PHP error reporting in php.ini or in a .htaccess file to get PHP to help you.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by CFMaBiSmAd View Post
    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=ht...Inline&group=0

    http://jigsaw.w3.org/css-validator/v...usermedium=all
    There are no CSS errors.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Senior Coder CFMaBiSmAd's Avatar
    Join Date
    Oct 2006
    Location
    Denver, Colorado USA
    Posts
    3,108
    Thanks
    2
    Thanked 326 Times in 318 Posts
    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?
    If you are learning PHP, developing PHP code, or debugging PHP code, do yourself a favor and check your web server log for errors and/or turn on full PHP error reporting in php.ini or in a .htaccess file to get PHP to help you.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 12-19-2007 at 11:38 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?):
    Code:
    <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
    Last edited by spietreser; 12-19-2007 at 12:13 PM. Reason: Added question

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Cool

    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
    Last edited by effpeetee; 12-19-2007 at 12:40 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 12-19-2007 at 02:07 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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
    Last edited by spietreser; 12-19-2007 at 02:27 PM.

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.
    Last edited by effpeetee; 12-19-2007 at 02:31 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Do this;

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


    Some Divs need a height in IE.

    Frank
    Last edited by effpeetee; 12-19-2007 at 02:40 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #13
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Code:
    .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.
    Attached Thumbnails Attached Thumbnails IE misplaces my div!-screenhunter_02-dec.-20-16.38.jpg  
    Last edited by effpeetee; 12-20-2007 at 04:42 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #15
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!).

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

    THANK YOU


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •