DIV problem, not pushing footer down

Forum Moderators: not2easy

Message Too Old, No Replies

DIV problem, not pushing footer down

1st Time.be gentle-CSS/DIV problem driving me nuts!

skywalker

4:51 pm on Apr 8, 2008 (gmt 0)

Hi,

First time here, first post, tried the Search but could not find anything which points me to help on this. Firstly, be gentle I am very much a newbie in all senses in CSS, DIVs and positionals

Basically, I have created a website in Dreamweaver using DIVs rather than tables, as I used to use tables before. The whole template was cut up in Fireworks and brought into DW where most of the positionals have been done. All was looking good, until I was finishing this template page with the main panel for the text to go in centrally. My problem is, that the text box with the main heading and all the body copy when pasted into the DIV will not move down the base elements to accommodate, all this was easy when I did a first draft in tables.

But the six boxes (three either side) split apart height wise, so I started again with DIVs. I was really getting the hang of this but it is now doing my nut in.

I am looking for help please on tidying up the main central content panel as a DIV which will not change the left and right boxes. But push down all other content, the PDF link doc below, the quote, the line of logos and the black bar footer.

As I said, I am a newbie, this is the first forum of it's kind I have joined, you look like a really helpful bunch . Please, I am really trying to understand all these processes as much as I can, I have had a great learning curve to overcome with the switch to DIVs over the last few weeks.

Any help on this would be greatfully appreciated

Cheers Nick

[edited by: jatar_k at 7:30 pm (utc) on April 8, 2008]

swa66

6:23 pm on Apr 8, 2008 (gmt 0)

Welcome young jedi,

To go easy on you:

First: No URLs to your sites are allowed out here (mods will clean up I guess).. and it's broken as well, so it's of no use.

Before you post long code: try to reduce the problem, there's a nice sticky post, if you do that you'll learn a lot in the process.

I for one am not fond of reading machine generated code, so make sure you reduce it to it's minimum.

Tip to make it easier: develop in firefox (or opera/safari, anything but IE), once you get it working in them, move to IE (be ready to be confronted with a horror image), and use conditional comments to add IE only fixes. Doing it the other way around is much harder.

skywalker

6:43 pm on Apr 8, 2008 (gmt 0)

Blimey.... swa66, thanks.

Sorry, should have read the stickies on posting URLs, but it really makes things difficult showing others what is happening if I cannot show the page live, surely. As for reducing and pasting code, if I could strip that down to what the problem was I would be probably answering my own questions.

I really want to learn from my mistakes, perhaps this forum is a little 'advanced' for me.

We all have to start somewhere ;-)

jatar_k

7:33 pm on Apr 8, 2008 (gmt 0)

Welcome to WebmasterWorld skywalker,

paste a little code and see, members will ask if they need something more specific. The trick is the smaller the code chunk the easier it is for other members to help you.

You could try laying it out with a minimum amount of code and post that. The process may be the way to find the error as well.

skywalker

9:32 pm on Apr 8, 2008 (gmt 0)

Okay jatar_k, appreciate that, here goes.

Here is the page code, the bottom half showing the page structure, I know, I know lots of divs..... It may be more code than you guys like to see, but I cannot slice anything away without knowing if it is critical or not.

I can put the div information which is above this on another post if you need. I think there is something wrong with having so many 'absolutes'.

}
-->
</style></head>
<div id="apDiv4"><br>
<body onLoad="MM_preloadImages('../images/homepurp.jpg', '../images/conmanpurp.jpg', '../images/secindpurp.jpg', '../images/liretailpurp.jpg', '../images/evmanpurp.jpg', '../images/consultpurp.jpg', '../images/coursespurp.jpg')">

<div id="defaultr1c1"><img name="default_r1_c1" src="images/default_r1_c1.jpg" width="9" height="6" border="0"></div>
<div id="defaultr1c2"><img name="default_r1_c2" src="images/default_r1_c2.jpg" width="942" height="6" border="0"></div>
<div id="defaultr1c29"><img name="default_r1_c29" src="images/default_r1_c29.jpg" width="10" height="6" border="0"></div>
<div id="defaultr2c2"><img name="default_r2_c2" src="images/default_r2_c2.jpg" width="15" height="73" border="0"></div>
<div id="defaultr2c4"><img name="default_r2_c4" src="images/default_r2_c4.jpg" width="58" height="73" border="0"></div>
<div id="defaultr2c7"><img name="default_r2_c7" src="images/default_r2_c7.jpg" width="92" height="73" border="0"></div>
<div id="defaultr2c8"><img name="default_r2_c8" src="images/default_r2_c8.jpg" width="22" height="73" border="0"></div>
<div id="defaultr2c10"><img name="default_r2_c10" src="images/default_r2_c10.jpg" width="8" height="73" border="0"></div>
<div id="defaultr2c11"></div>
<div id="defaultr2c17"><img name="default_r2_c17" src="images/default_r2_c17.jpg" width="345" height="73" border="0"></div>
<div id="defaultr2c27"></div>
<div id="defaultr2c29"></div>
<div id="defaultr3c2"><a href="home.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','', '../images/homepurp.jpg',1)"><img src="../images/homeblue.jpg" name="Home" width="73" height="40" border="0"></a></div>
<div id="defaultr3c7"><a href="con_manage.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ConMan','', '../images/conmanpurp.jpg',1)"><img src="../images/conmanblue.jpg" name="ConMan" width="159" height="40" border="0"></a></div>
<div id="defaultr3c12"><a href="sec_indus.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('SecInd','', '../images/secindpurp.jpg',1)"><img src="../images/secindblue.jpg" name="SecInd" width="132" height="40" border="0"></a></div>
<div id="defaultr3c14"><a href="lice_retail.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('LiceRet','', '../images/liretailpurp.jpg',1)"><img src="../images/liretailblue.jpg" name="LiceRet" width="120" height="40" border="0"></a></div>
<div id="defaultr3c16"><a href="event_manage.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('EveMan','', '../images/evmanpurp.jpg',1)"><img src="../images/evmanblue.jpg" name="EveMan" width="146" height="40" border="0"></a></div>
<div id="defaultr3c18"><a href="consultancy.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Consult','', '../images/consultpurp.jpg',1)"><img src="../images/consultblue.jpg" name="Consult" width="100" height="40" border="0"></a></div>
<div id="defaultr3c21"><a href="courses.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Courses','', '../images/coursespurp.jpg',1)"><img src="../images/coursesblue.jpg" name="Courses" width="76" height="40" border="0"></a></div>
<div id="defaultr3c24"><img name="default_r3_c24" src="images/default_r3_c24.jpg" width="136" height="40" border="0"></div>
<div id="defaultr4c2"><img name="default_r4_c2" src="images/default_r4_c2.jpg" width="187" height="10" border="0"></div>
<div id="defaultr4c10"><img name="default_r4_c10" src="images/default_r4_c10.jpg" width="493" height="208" border="0">
<div id="apDiv2"></div>
</div>
<div id="defaultr4c20"><img name="default_r4_c20" src="images/default_r4_c20.jpg" width="261" height="104" border="0"></div>
<div id="defaultr5c2"><img name="default_r5_c2" src="images/default_r5_c2.jpg" width="187" height="15" border="0"></div>
<div id="defaultr6c2"><img name="default_r6_c2" src="images/default_r6_c2.jpg" width="15" height="171" border="0"></div>
<div class="leftnav" id="defaultr6c4"><a href="#">Link One</a></div>
<div id="defaultr6c8"><img name="default_r6_c8" src="images/default_r6_c8.jpg" width="22" height="171" border="0"></div>
<div id="defaultr7c4"><img name="default_r7_c4" src="images/default_r7_c4.jpg" width="150" height="2" border="0"></div>
<div class="leftnav" id="defaultr8c4"><a href="#">Link Two</a></div>
<div id="defaultr9c4"><img name="default_r9_c4" src="images/default_r9_c4.jpg" width="150" height="2" border="0"></div>
<div class="leftnav" id="defaultr10c4"><a href="#">Link Three</a></div>
<div id="defaultr11c4"><img name="default_r11_c4" src="images/default_r11_c4.jpg" width="150" height="2" border="0"></div>
<div class="leftnav" id="defaultr12c4"><a href="#">Link Four</a></div>
<div id="defaultr14c20"><img name="default_r14_c20" src="images/default_r14_c20.jpg" width="130" height="103" border="0"></div>
<div id="defaultr14c26"><img name="default_r14_c26" src="images/default_r14_c26.jpg" width="130" height="103" border="0"></div>
<div id="defaultr15c4"><img name="default_r15_c4" src="images/default_r15_c4.jpg" width="150" height="2" border="0"></div>
<div id="defaultr16c1"></div>
<div class="leftnav" id="defaultr16c4"><a href="#">Link Five</a></div>
<div id="defaultr17c4"><img name="default_r17_c4" src="images/default_r17_c4.jpg" width="150" height="2" border="0"></div>
<div class="leftnav" id="defaultr18c4"><a href="#">Link Six</a></div>
<div id="defaultr19c4"><img name="default_r19_c4" src="images/default_r19_c4.jpg" width="150" height="2" border="0"></div>
<div id="defaultr20c4"></div>
<div id="defaultr21c2"><img name="default_r21_c2" src="images/default_r21_c2.jpg" width="187" height="12" border="0"></div>
<div id="defaultr22c2"><img name="default_r22_c2" src="images/default_r22_c2.jpg" width="187" height="8" border="0"></div>
<div id="defaultr22c10"><img name="default_r22_c10" src="images/default_r22_c10.jpg" width="8" height="8" border="0"></div>
<div id="defaultr22c11"><img name="default_r22_c11" src="images/default_r22_c11.jpg" width="747" height="8" border="0"></div>
<div id="defaultr23c2"><img name="default_r23_c2" src="images/default_r23_c2.jpg" width="187" height="11" border="0"></div>
<div id="defaultr23c10"><img name="default_r23_c10" src="images/default_r23_c10.jpg" width="8" height="11" border="0"></div>
<div id="defaultr23c11"><img name="default_r23_c11" src="images/default_r23_c11.jpg" width="747" height="11" border="0"></div>
<div id="defaultr24c2"><img name="default_r24_c2" src="images/default_r24_c2.jpg" width="10" height="635" border="0"></div>
<div id="defaultr24c3"><img name="default_r24_c3" src="images/default_r24_c3.jpg" width="162" height="10" border="0"></div>
<div id="defaultr24c9"><img name="default_r24_c9" src="images/default_r24_c9.jpg" width="23" height="637" border="0"></div>
<div id="defaultr24c11"><img name="default_r24_c11" src="images/default_r24_c11.jpg" width="566" height="10" border="0"></div>
<div id="defaultr24c22"><img name="default_r24_c22" src="images/default_r24_c22.jpg" width="12" height="637" border="0"></div>
<div id="defaultr24c23"><img name="default_r24_c23" src="images/default_r24_c23.jpg" width="162" height="10" border="0"></div>
<div id="defaultr24c28"><img name="default_r24_c28" src="images/default_r24_c28.jpg" width="10" height="635" border="0"></div>
<div id="alt1box"><img name="default_r25_c3" src="images/default_r25_c3.jpg" width="162" height="192" border="0"></div>
<div class="maintitle" id="defaultr25c11">Main Title</div>
<div id="contact"></div>

<div id="defaultr35c2"><img name="default_r35_c2" src="images/default_r35_c2.jpg" width="10" height="109" border="0"></div>
<div id="defaultr35c28"><img name="default_r35_c28" src="images/default_r35_c28.jpg" width="10" height="109" border="0"></div>
<div class="body" id="bodytextblock"> <span class="subtitle">Sub Heading</span><br>
Body text goes here - enter lots of favourite foo text. </div>
<div id="logos"></div>
<div id="blackbarfooter"></div>
<div id="apDiv1"></div>
<div id="apDiv3"></div>
</div>
</body>
</html>

Thanks for looking in.

[edited by: SuzyUK at 6:12 am (utc) on April 9, 2008]
[edit reason] fixed sidescroll, removed specifics from body text [/edit]

skywalker

9:34 pm on Apr 8, 2008 (gmt 0)

Here also is Div4, which may or may not be critical ;-)

}
#apDiv4 {
position:absolute;
width:960px;
height:1128px;
z-index:1;
background-position: centre;
table-layout: fixed;

swa66

10:20 pm on Apr 8, 2008 (gmt 0)

Presuming it's not a cut&paste error ...


...</head>
<div id="apDiv4"><br>
<body ...

That div is outside of your body tag ?
Can't be good.

But to be honest: your code is very complex (always the case when generated I guess). This will make maintenance a nightmare.
Take a look at simple 3 col layout, or even just float the menus on both sides and let the body flow in between. It'll make your life easier.


#apDiv4 {
...
table-layout: fixed;

table-layout: fixed on a div ? doesn't make much sense.

#apDiv4 is given a fixed size, and from what I understanad you have trouble with size of it ? Not having the rest of the CSS makes it hard, but try not giving it height.

CSS pseudo class :hover might also save the javascript in there form being needed (since it seems to be only use to swap images).

All those images with divs around them and all those divs, what's the purpose ?

SuzyUK

7:15 am on Apr 9, 2008 (gmt 0)

hi skywalker, and Welcome!

I think you possibly have CSS code which has a lot of Absolute Positioning in it? DW "layers" are absolutely positioned divs and it tends to build "force" a layout together like a jigsaw by fitting them very precisely to a grid where each "layer" has a very specific height and width.

That kind of goes against the grain of what CSS should be used for, I can see from your HTML and swa66 has already mentioned that there are simply too many divs. You can position an image without wrapping it in a div, divs are generic containers for "divisions" of a page - an img is simply another HTML element that can be positioned the same as any other

CSS rollover menus can be built without positioning/swapping images, and usually without JavaScript too. Your content needn't be positioned at all and your footer getting pushed down is only going to happen if it and the content are not absolutely positioned or if you always know how tall the content on each page is going to be.

Your images, if they're part of the design/layout should really be background images and as such should probably not be chopped/sliced, if you put the images back together can they not sit as a background image to the page or a single wrapper div?

anyway a lot of this is guess work as I can't see the CSS, but the HTML is a bit nightmarish ;) don't be disheartened everyone has to learn somewhere I agree but starting off is best done on the right foot. I know a lot of people swear by DW, so I won't knock it, too much anyway.. it's likely a useful tool if you know what you want it to do but relying on it it to teach you how CSS should work is unfortunately not the best way to start learning CSS&P (positioning) it has problems displaying simple floated layouts at times and can give people the wrong idea that CSS doesn't work!

The test of a good layout is that with CSS turned off (just copy and paste the HTML code above into a blank page), does the document still make sense? IMHO it doesn't as there is way too (presentational?) images before you even get to the content and it also appears like the links menu is broken up, this should not be necessary.

Try not to use Absolute Positioning unless it's necessary, it's advanced CSS and it very very restrictive.

best advice is to to some of the CSS template sites and import some of them into DW and play around with them until you see how DW handles them and what you'd like them to do

meanwhile you could work with a table/CSS hybrid layout until you get to grips with how the CSS basics work

HTH
-Suzy

skywalker

8:29 am on Apr 9, 2008 (gmt 0)

Thanks to you both for the comments, I am in a bit of a pickle at the moment I can see, I probably need to look at how CSS works rather than leave it to be generated by DW. But I need to try and get this site working with the footer pushing down.

I will in the meantime try and read up on simple CSS and what everything does. The site does look superb and I am really happy with it apart from this text box issue. I even looked at putting in a scroll text box last night which worked, but it is something I really did not want to add.

I am too far down the line with the site to start again, well I have already done that as this is the second version, the first was all tables. But that pushed the left and right boxes down ;-)

If I can get this text box right then this page will form the template for the whole website and I will simply duplicate it. I think the main problem is that I have obviously relied on Fireworks to cut the whole page image up, it started as a flat jpeg. I then exported that from Fireworks to Dreamweaver which created the initial page with all the images cut up and what I thought were in position. I had trouble centering the page in the browser, which normally presented no problems in tables. But with DIVs I could not work out at all how to do this, so I copied the whole page and dropped it into a DIV to control.

That may be the problem and DIV4 is the culprit.

swa66 I will look at that now and see if I can use what you have suggested, thank you for helping out ;-) . SuzyUK thank you also for your comments, these will be my next things I will try and do.... learn CSS without it being generated.

Hopefully this will be the last total DW website I produce, I am so willing to learn and excited at the same time. Getting this far hasn't taken me long really, I really should have looked at the basics first, but I am eager to run.........perhaps I need to sloooow down.

Cheers Nick

sunwukung

9:12 am on Apr 10, 2008 (gmt 0)

Have you got the style sheet to hand. Normally, if I want to get a footer to "push" down, I'd use this


/* where footer is an empty div class="footer" */ 
.footer {
height = 50px; 
float: left;
clear: both;
}

However - if your entire page is comprised of objects that use position: absolute - then they are all outside the "flow" of the document and so invisible to the footer. For this to work, all the elements would need to be positioned with floats.

skywalker

10:33 am on Apr 16, 2008 (gmt 0)

I just thought I would update everyone, it has been a long week!

I took the main bulk of advice to learn more about CSS and clean up some of the Dreamweaver code and that has worked out really well, I feel I am actually understanding the code now rather than just generating it ;-)

So all my previous problems with the site are now resolved, thanks for all your input.

However...... clients being clients, wanted to change my simple secondary left hand 'click to got to sections' nav into one which has subsections ;-(

So I learnt how to build a Spry Menu Vertical widget which replaced the old nav which allowed the user to hover over a section and a left hand dropdown popped out with sub pages.

All was working well, adding css styles for all the text to match the first white on blue nav. Tested in various browsers the nav was working fine, except a few quirks in IE, I have 5.2 on the Mac here. All other browsers work fine but now I have mysteriously lost the secondary dropdowns in IE and even the rollover colours, the text just shows and evn that seems to move a shade when rolled over.

I have gone onto the Adobe Spry forum and Searched for solutions but cannot find anything there and here which can help.

Here is my Menu:
-----------------------------
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Our Company</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Our People</a>
<ul class="MenuBarVertical">
<li><a href="#">Managing Director</a></li>
<li><a href="#">Business Development Manager</a></li>
<li><a href="#">Senior Trainer</a></li>
</ul>
</li>
<li><a href="#">Our Clients</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Policies & Procedures</a></li>
</ul>
------------------------------------
Here also is my SpryMenuBarVertical.css

ul.MenuBarVertical
{
margin: 0;
list-style-type: none;
font-size: 10pt;
cursor: default;
width: 150px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #FFFFFF;
height: auto;
padding-top: 3;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: */
ul.MenuBarActive
{
z-index: 1000;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
margin: 0;
list-style-type: none;
font-size: 10pt;
position: relative;
cursor: pointer;
width: 149px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
background-color: #009AFB;
height: 22;
padding-top: 3;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
top: 0px;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 219px;
left: -1000em;
top: -6px;
height: auto;
margin-right: 0;
margin-bottom: 0;
margin-left: 100%;
padding-top: 3;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 1px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
width: 220px;
margin-left: 0px;
text-indent: 0px;
margin-top: 0px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: left;
}

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
border: 0px solid #CCC;
margin: 0px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
border: 0px solid #CCC;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
background-color: #009AFB;
color: #FFFFFF;
text-decoration: none;
height: 22px;
max-height: 22px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
background-color: #009AFB;
color: #FFF;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-position: top;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 2px;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
height: 22px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-position: top;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

/*******************************************************************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(../menu/SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
margin: 0px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 22px;
}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-image: url(../menu/SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 22px;
}

/*******************************************************************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

*******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
position: absolute;
z-index: 1010;
height: 22px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
}

-----------------------------
I really am trying to solve this myself, honest ;-) but any pointers to anything above which looks a tad odd would be great.

Cheers

Nick

[edited by: SuzyUK at 4:57 pm (utc) on April 18, 2008]
[edit reason] removed url from code comment [/edit]

SuzyUK

5:06 pm on Apr 18, 2008 (gmt 0)

Hi Nick.. this is the second question about Spry Menus we've had recently, unfortunately unless someone knows their intracacies then it's fairly hard to troubleshoot from the CSS code.

The menu itself is linked to javascript which inserts the necessary classes for hover and ie, so to me anyway this code actually looks unecessarily complicated. However I realise it's probably this way so it can be a plug and play.

now when you say you have IE/mac are the problems you're seeing also present in IE windows? IE/Mac is not really supported anymore and it never really handles the CSS Popup technique very well, so perhaps the widget doesn't include support for IE/Mac?

sorry not to be more help, I'm sure a few here could recode you a simple popup menu but scanning the spry javascript in order to troubleshoot a problem is possibly too time consuming for many here.

perhaps looking for a simpler method of generating a CSS Popup menu might be an option or does adobe have a support forum for their widgets?

-Suzy

skywalker

5:33 pm on Apr 18, 2008 (gmt 0)

Hi Suzy,

Thanks for the reply.

Good news!, I think I have sorted it all late yesterday, early today. IE is not supported for the Mac as you say, my version was 5.2. But I fired up the test page on a PC with an updated IE and basically spent a day going through all the code logically, rather than visually.

I must admit I am learning so much more by making small changes in the code and refreshing the browser than making changes directly in Dreamweaver.

I also found out that my Java application was 1.4 in Spry and not 1.6.1 so I upgraded that which also solved some final problems. So all in all, very happy all now fixed.

I am planning to stick around and learn lots more, thanks for your help.

Nick

swa66

10:41 pm on Apr 18, 2008 (gmt 0)

Don't use the ancient IE for mac to check how things look in IE. It's not representative.

Actually I'd suggest to forget IE for mac, completely. If you have anywhere a normal website, you will not have visitors using it anymore.
To test IE: fire up a virtual machine running windows (in something like vmware, parallels). I actually keep copies of the virtual images around with different states of upgraded browsers so I can have IE6, IE7 and IE8beta all on my laptop (at the same time if need be).