|
CSS - Nested Menu Alignment Probs And Some Javascript
Hi. Three issues with this menu - I've been trying to get a horizontal hover/nested list to work where the submenus are displayed inline underneath the main menu.
1. I've got the arrangement fairly close in FF, but in IE the top level items are jumping around all over the place on hover. 2. The javascript came from alsacreations, and seems to work pretty easily, but the submenus fail to disappear on rollOut unless you are going to another of the menu items. Any ideas? 3. Do you think there is anyway of leaving the top level links in their "active/hover" state when the mouse has moved to the submenus? So the coloured background that appears on hover stays there whilst hovering over the submenus? I've isolated the xhtml, styles and script into a page (it's a rework of a current page and is pretty incomprehensible in-situ!) at http://www.prioritypie.f2s.com/KSAV6/menuTest.html. Cheers for any advice. And I forgot to ask what the issue is with IE and transparent borders - they seem to appear black and of variable width! Similar TutorialsHi all, I've always learned what I know (which isn't all that much, but wtf) from trying to fathom the source code of cool sites I visit and then attempting to implement those things I like into my own page. I recently visisted a very cool site that uses a CSS drop down menu. The only problem is it's got one level and I want more than that. I've attempted to tweak the code through trail and error and my basic basic understanding of CSS, but to no avail. When you roll over the top level menu, the secondary displays as it should but the 3rd also displays before you roll onto the link that should activate it. I'm sure I'm just missing somethign small but after working on this for a number of days, trying to figure it out, I appeal to you all for help! Thanks in advance for your support and suggestions! Here is the HTML code for the section (I edited it just so you can see what I'm looking for) <div id="navigation"> <ul id="nav"> <li class="nav"><a href="" onclick="return false">Novels</a> <ul class="subnavnovels"> <li class="subnav"><a href="" onclick="return false">Lawson Vampire Novels</a> <ul class="subsubnav"> <li class="subsubnav"><a href="fixer.html">The Fixer</a></li> <li class="subsubnav"><a href="invoker.html">The Invoker</a></li> <li class="subsubnav"><a href="des.html">The Destructor</a></li> <li class="subsubnav"><a href="syn.html">The Syndicate</a></li> </ul> </li> </ul> </li> And here's the CSS code for the nav section: /* NAVIGATIONAL ELEMENTS */ #nav {z-index:3;} #nav a {color:#FFF;text-decoration:none} #nav a:hover {color:#07B6D0;text-decoration:none} li.nav {margin-right:24px;} ul { /* all lists */ padding: 0; margin: 0; list-style: none; } li { /* all list items */ float: left; position: relative; } li ul { /* second-level lists */ display: none; position: absolute; top: 1em; left: 0; padding:3px 7px; border:1px solid #27444C; } li ul ul { /* third-level lists */ display: none; width: 100px; position: absolute; top: 0; left: 140; padding:3px 7px; border:1px solid #27444C; } li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */ top: auto; left: auto; } li:hover ul, li.over ul { /* lists nested under hovered list items */ display: block; clear:left; background:url(menubg.png); } .subnavnovels {width:140px;} .subnavshorts {width:140px;} .subnavnonfic {width:160px;} .subnavother {width:170px;} .subnavcommunity {width:170px;} .subnavabout {width:100px;} .subnavcontact {width:100px;} li.subnav {float:none;} li.subsubnav {display:inline;} I have read more tutorials on list than I care to recall and still I am having difficulties getting this to work right. Here is the web page The top navigation bar has a link "Other regions". I want to have a drop down list of the other regions under it. I nested a list under the "Other regions" li. It is working - sort of but not correctly. The nested list is showing up under "home" and the are all on top of each other. Here is the html: Code: <div id="topbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about_us/about_us.html">About Us</a></li>
<li class="dropmenu"><a href="other_regions.html">Other Regions</a>
<ul>
<li><a href="#">Ireland</a></li>
<li><a href="#">Germany</a></li>
<li><a href="#">USA (North America)</a></li>
<li><a href="#">Latin America</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
</ul>
</div>
Here is the css: Code: #topbar {
height: 20px;
background-color: #3399FF;
border: 1px solid #000099;
padding-left: 10px;
margin-bottom: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
color: #FFFFFF;
background-color: transparent;
border: 1px solid #3399FF;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
#topbar a:hover, #topbar a:active {
color: #000099;
background-color: #DDEEFF;
border: 1px solid #000099;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
#topbar ul {
list-style: none;
margin: 1px 0px 1px 0px;
padding: 2px 0px 0px 0px;
}
#topbar li {
display: inline;
margin-right: 150px;
}
.dropmenu ul {
position: relative;
}
.dropmenu li {
position: absolute;
}
.dropmenu a:link, .dropmenu a:visited {
color: #000000;
background-color: transparent;
border: 1px solid #FF00FF;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.dropmenu a:hover, .dropmenu a:active {
color: #000099;
background-color: #DDEEFF;
border: 1px solid #000099;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.dropmenu li:hover ul { display: block; }
/*Main Section two columns under top section*/
#wrapper{
width: 100%;
min-height: 519px;
background: url(../images/bgcol.gif) repeat-y;
padding: 0px;
margin: 0px;
}
Help please I've found a horizontal navigation menu set-up that I'd like to emulate in a simplified form but I'm having a tough time wrapping my head around what it would take. First, here's the site with the menu system : http://rhizome.org/ In particular, I really like how there is a horizontal 'main menu' - 'Art', 'Community', and 'About' and below that a permanent horizontal bar that displays a submenu for each of the main menu items. I also really like that the submenu doesn't disappear immediately when you move the cursor away. I've examined the code but I'm having a hard time adapting and streamlining it. They don't seem to be using lists, and I would like to use lists. I've adapted menus from 'Listmatic' in the past and found them to be successful. What I'm going for is a very simple appearance with two horizontal colored bars, one above the other. The upper bar will permanently display the main menu and the lower bar will display a different submenu for each main menu item that the cursor hovers over, and the submenus won't disappear until a different main menu item is hovered over. I hope that all makes sense. Basically I'm not looking for someone to write all the code for me, but just perhaps something to get me in the right direction. Thanks in advance! I inherited the template this website uses, and I don't have much choice about using it.. I would prefer to build the site from scratch, but the client is tying my hands.. I just need to make this work. Hoping the community can help.. Here's the site: http: // clients . overthehillweb . com/ progroom / The menu right underneath the logo is driving me nuts.. I cannot get those darn tabs to flush to the left to save me, and I though I have been trying a lot of plausible and implausible things, but I can't make sense of the menu styles used in the bloody stylesheet to figure out how the heck to fix this.. I hope one of our resident CSS gurus can help me untangle this mystery.. PLEASE!!! Code: #top_nav {
background: #3a88a9 url("../images/ezpages_bg.gif");
font-family: verdana, arial, helvetica, sans-serif;
font-size: 1.15em;
margin: 0em;
/* padding: 0.5em;*/
height: 39px;
}
#tab_nav a {
color: #ffffff;
text-decoration: none;
}
#tab_nav li {
float: left;
background: url("../images/bg_tabs_left.gif") no-repeat 0 0;
padding: 0 0 0 5px;
border-right: 1px solid #3a88a9;
}
#tab_nav li a {
display: block;
background: url("../images/bg_tabs_right.gif") no-repeat right 0;
padding: 10px 20px 10px 18px;
}
#tab_nav li:hover {
background-position: left -40px;
}
#tab_nav li:hover a {
background-position: right -40px;
}
#tab_nav #tab_active{
background-position: 0 -78px;
}
#tab_nav #tab_active a {
background-position: right -78px;
}
#tab_nav li.home-link {
padding: 0;
}
#tab_nav li.home-link a {
display: block;
background: url("../images/home_tab.gif") no-repeat left 0;
padding: 0px 20px 10px 18px;
height: 27px;
width: 2px;
}
#tab_nav li.home-link:hover a {
background-position: left -39px;
}
#login_logout_section, #login_logout_section a {
font: normal 11px verdana, arial;
color: #ffffff;
padding: 11px 7px;
}
#login_logout_section a:hover {
text-decoration: none;
}
.top-nav-right {
background: url("../images/top_nav_right_bg.gif") right top;
height: 39px;
width: 6px;
float: right;
}
.top-nav-left {
background: url("../images/top_nav_left_bg.gif") left top;
height: 39px;
width: 6px;
float: left;
}
Hey, I have a drop down menu that when i view it in Internet Explorer is aligned fine but isnt working properly in firefox. I think the problem lies in the white spaces either side of the page. If the page fits the screen snug there isn't an alignment problem, this is better explained when viewing the site on different resolutions. I'm pretty sure the problem lies in the css but i don't know enough pinpoint it. I can't post the address on the forum because of the rules but its www northsidestageschool com (where spaces are dots). Sorry if this breaks rules but my problem really doesn't make any sense with out the link! Any ideas? Mike Hey guys, I'm trying to aling my menu in my new website. I'm trying to align the buttons on the bottom of the dark div on the top of the page. Its not working at all, and FF en IE are showing different stuff: So, in both browsers, I cant get it to work. I want the two buttons to be aligned on the bottom of the dark part, like tabs. Next to eachother. Any (bright) ideas? Thanks! This is the complete code I'm using: html Code: Original - html Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <style> .shadowbox {margin-bottom:4px;background: #dfdfdf; border: 1px solid #f5f5f5; position: relative;top: 2px;left: 2px;} .lightyellow {padding:10px;background: #FFFFCC;border: 1px solid #B6B6B6;color: #242424;} .shadowbox div.normal {position: relative;top: -2px;left: -2px;} #content {width: 90%; margin-top: 15px; padding: 15px; margin-left: 5%; background: #FFFFFF; border: 1px solid #000000; text-align: left;} #header {margin: 0px; padding: 0px; padding-left: 5%; background: #333333; height: 65px; text-align: left; } #logo { padding-top: 10px} body {padding: 0px; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80%; background-image: url('images/back.gif'); background-repeat: repeat; } h1 { font-size: 150%; padding: 0px; margin: 0px; padding-bottom: 5px; padding-left: 2px; } #copyright { text-align: center; font-size: 10px; margin-top: 25px; color: #7D7D7D; } </style> </HEAD> <BODY> <div id='header'> <div id='logo'> <img src='images/logo.png' alt='InvenI'> </div> <img src='images/zoeken_inactive.gif'> <img src='images/zoeken_inactive.gif'> </div> <div id='content'> <h1>Mijn Verlanglijstje</h1> <div class='shadowbox'> <div class='normal lightyellow'> hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br /> </div> </div> <div class='shadowbox'> <div class='normal lightyellow'> hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br /> </div> </div> </div> <div id='copyright'> Geen enkele advertentie wordt gehost op InvenI, InvenI is dus ook niet verantwoordelijk voor hun inhoud.<br /> InvenI.nl is niet verantwoordelijk voor (gevolg)schade ontstaan door het gebruik van deze site.<br /> Geregistreerde namen zijn eigendom van hun eigenaren.<br /> Meer informatie over uw Privacy.<br /> </div> </BODY> </HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
.shadowbox {margin-bottom:4px;background: #dfdfdf;
border: 1px solid #f5f5f5; position: relative;top: 2px;left: 2px;}
.lightyellow {padding:10px;background: #FFFFCC;border: 1px solid #B6B6B6;color: #242424;}
.shadowbox div.normal {position: relative;top: -2px;left: -2px;}
#content {width: 90%; margin-top: 15px; padding: 15px; margin-left: 5%; background: #FFFFFF; border: 1px solid #000000; text-align: left;}
#header {margin: 0px; padding: 0px; padding-left: 5%; background: #333333; height: 65px; text-align: left; }
#logo { padding-top: 10px}
body {padding: 0px; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80%; background-image: url('images/back.gif'); background-repeat: repeat; }
h1 { font-size: 150%; padding: 0px; margin: 0px; padding-bottom: 5px; padding-left: 2px; }
#copyright { text-align: center; font-size: 10px; margin-top: 25px; color: #7D7D7D; }
</style>
</HEAD>
<BODY>
<div id='header'>
<div id='logo'>
<img src='images/logo.png' alt='InvenI'>
</div>
<img src='images/zoeken_inactive.gif'>
<img src='images/zoeken_inactive.gif'>
</div>
<div id='content'>
<h1>Mijn Verlanglijstje</h1>
<div class='shadowbox'>
<div class='normal lightyellow'>
hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />
</div>
</div>
<div class='shadowbox'>
<div class='normal lightyellow'>
hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />
</div>
</div>
</div>
<div id='copyright'>
Geen enkele advertentie wordt gehost op InvenI, InvenI is dus ook niet verantwoordelijk voor hun inhoud.<br />
InvenI.nl is niet verantwoordelijk voor (gevolg)schade ontstaan door het gebruik van deze site.<br />
Geregistreerde namen zijn eigendom van hun eigenaren.<br />
Meer informatie over uw Privacy.<br />
</div>
</BODY>
</HTML>
Hi guys, Can someone possibly take a look at this page, my css dropdown (sub menu part) isnt showing up under menu where its meant to ?? ** Its showing up off to the right and not under the toplevel menu. Its driving me nuts! http://www.goonlinewebdesign.com.au/dear-mr-mechanic/demo15/test.php I am having trouble with my dropdown menu alignment. When you move over the menu heading, the dropdown appears down to the left instead of immediately under the heading. Help! Below is the NAV info from the CSS file: /* nav */ /* below sets up the menu bar characteristics clear:right;*/ #navi_wrap{float:left; margin-top:0px; width:570px; height:35px; /*border: 1px solid #0000ff;*/ background-color: #ffffff; border-top: 0px solid #c0c0c0; border-bottom: 0px solid #c0c0c0; } .current_page_item{text-transform: uppercase;} /* below sets up the top menu characteristics? */ #navmenu{ float: left list-style-type: none; position:absolute; z-index:300; padding: 2px 0 0 10px; width: 570px; } /* below sets up the top menu content characteristics */ #navmenu a{ float: left; font-family: arial; font-size: 14px; color: #696969; line-height: 18px; margin: 0 15px 0 15px; padding: 8px 4px; font-weight:light; } #navmenu a:hover{} /* below spreads out the top menu items */ #navmenu li{ float: left; position:relative; } /* below fixes position of top menu items */ #navmenu ul { position:absolute; top:0; left:0; padding:0; display:none; z-index:900; } /* below fixes position of text in dropdowns on left side */ #navmenu ul a { float:left; } /* below defines shape of dropdowns boxes */ #navmenu li ul{ float:right; width: 150px; margin-top: 33px; height: auto; background-color: #c0c0c0; border: 1px solid #c0c0c0; border-top: 0 none; } #navmenu li ul a {} /* below defines width of dropdowns when hover */ #navmenu li ul li{ width:150px; } /* below defines content of dropdowns */ #navmenu li ul li a{ font-size: 12px; padding: 3px 6px; /*margin: 0 2px;*/ } /* below defines background of dropdowns when hover */ #navmenu li ul li:hover{ background-color: #DCDCDC; vertical-align: middle; } /* below defines the sub-sub menu characteristics */ #navmenu ul ul { position:absolute; top:0; left:auto; z-index:600; border: 1px solid #c0c0c0; } #navmenu li ul ul {top:3px;left:145px; margin:0;} /* below defines the sub-sub menu hover characteristics */ #navmenu li ul ul li{ width:150px; } #navmenu li:hover ul ul, #navmenu li:hover ul ul ul, #navmenu li:hover ul ul ul ul {display:none;} #navmenu li:hover ul, #navmenu li li:hover ul, #navmenu li li li:hover ul, #navmenu li li li li:hover ul {display:block;} I'm having a problem with my drop menu
Code: #nav ul a:focus being too wide. It's set at 100%, and will shrink if I set it to 50%, but can't match the different sizes of my menus. Here is the link to the page so you can see when the menu drops, then you hover mouse over one of the links in the list, the image is wider than the box. http://www.alliancemonterey.org/temp/ Here is the drop menu css. Any help would be appreciated Code: #nav,
#nav ul { background-image:url(images/button.gif); list-style: none; margin: 0; padding: 0; z-index: 20000; }
#nav { font-family: Arial, Helvetica, sans-serif; font-size: 0.855em; /* 14px / 16px */ font-weight: bold; height: 2.286em; /* 32px / 14px */ line-height: 1.5em; /* 21px / 14px */ width: 760px; margin: 0; }
#nav li { background-image:url(images/button.gif); float: left; height: 2.286em; /* 32px / 14px */ margin: 0; padding: 0; position: relative; z-index: 10000; }
#nav a { color: #c7d0d9; display: block; padding: 0.286em 5px 0.5em; /* 4px 30px 7px */ text-decoration: none; }
#nav a:hover,
#nav a:focus { color: #fff; background-image:url(images/button_over1.gif); }
#nav ul { background-image:url(images/button_over2.gif); left: 0; font-size: 0.857em; /* 12px / 14px */ line-height: 1.5em; /* 18px / 12px */ position: absolute; top: 2.667em; /* 32px / 12px */ width: 100%; }
#nav ul li { background: none; float: none; height: auto; width: 100%; }
#nav ul a { background: none; padding: 0.083em 30px 0.25em; /* 1px 30px 3px */ width: 70%; }
#nav ul ul { font-size: 1em; }
#nav ul a:hover,
#nav ul a:focus { background-image:url(images/button_over1.gif); width: 100%; }
#nav ul.hover { background-image:url(images/button_over1.gif); width: 100%; }
#nav ul ul { left: 0px; top: 0.5em; /* 6px / 12px */ }
#nav ul,
#nav :hover ul ul,
#nav .hover ul ul { margin-left: -9999px; }
#nav li:hover>ul,
#nav li.hover>ul,
#nav a:focus>ul,
#nav ul ul,
#nav .hover a:focus { margin-left: 0; }
#nav ul a:focus { margin-left: 0; }
On this page: http://www.prioritypie.f2s.com/tremaer/_location/location.htm I have a rollover menu (courtesy of Bon Rouge's tutorial) that nicely runs in a line when viewed in FF, but in IE it reverts to a vertical list. Is there a way to stop this? And why doesn't the background for the containing div show up in FF when it does in IE? I had hoped a glass of red wine would help.... friends i have table.. that table corner must be in the curve form.. i dont know to do.. plz send the links for my problem curve edge is my output.. for that related css link plz thanks in advance hey all, i have a image which is a link and i wanted to change the blue box around it to something more inkeeping with the site. So i did this css Code:
a.greenToblack {
color:#000000;
font-size:13px;
text-decoration:none;
font-weight:600;
font: Georgia;
}
a.greenToblack:link {color:#000000; font: Georgia;}
a.greenToblack:visited {color:#000000; font: Georgia;}
a.greenToblack:hover {background-color:#667138; color:#667138; font: Georgia;}
and impletmented it as so Code: <a class="greenToblack" href="product.php?range_id=<?php print ($row->range_id) ?>"><img src="images/tmbnail/<?php print ( $row->tmbnail )?>" width="75" height="75" border="2"></a> it works perfectly in FF but not in IE..... any ideas why?? thanks RF Hello why wont this change the effects of my td Code: #tabs td.start { background:url("/pdp/images/style_images/default/section_on_left.gif") no-repeat left top; }
#tabs td.start a { background:url("/pdp/images/style_images/default/section_on_right.gif") no-repeat right top; font-weight:bold; }
#tabs td.start a:link { color:#fff; }
#tabs td.start a:visited { color:#fff; }
#tabs td.start a:hover { color:#64bfdb; text-decoration:underline; }
#tabs td.start a:active { color:#64bfdb; }
any help much appreciated Hi, I'm having problems with FireFox (or rather it's having problems with my coding). If you go to he http://jigsaw.w3.org/css-validator/...&usermedium=all It's all valid css but http://www.wnv2.com/v11.php shows up funny in FF but looks great in IE/Maxthon. View course for html, but the css code is in the validation link, Any help would be great! Thanks Please let me know if I need to post my questions more clear. I have read the "how to post css questions" but I don't seem to be getting any responses. BTW: if the site is working in IE for you please let me know. I appreciate your help. I'm new to CSS and this website. I have been working on a website that seems to be displaying properly in Chrome, FireFox, Opera and Safari. I am having problems getting it to display properly in Internet Explorer. To see the proper lay out look at it in Safari, Opera, FF or Chrome. the page is at : http://www.tmdessertworks.com/neotmtest/menutest.html Here is the CSS: Code: <style type="text/css">
<!--
body{
color: #e8d898;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #111111;
}
td{
vertical-align:top;
width: 194px;
}
td.menutitle{
width: 700px;
}
td.thumbnail{
width: 150px;
text-align:right;
}
.navmenu1{
text-align:center;
padding-left: 170px;
background: url(sitegrax/menuback_1.jpg);
}
.menu1 {
padding-left: 22px;
padding-top: 6px;
padding-bottom:6px;
background: url(sitegrax/menuback_1.jpg);
}
.endcap {
text-align:center;
padding-left: 64px;
background: url(sitegrax/menu_bottomcap.jpg);
background-repeat:no-repeat;
}
.style {
color: #FF6600;
font-style: italic;
}
-->
</style>
I have validated my CSS and HTML and I have searched the forums but don't quite know what is happening to fix the problems: 1. Backgrounds not filling to 800px 2. Small spaces between <div> tags 3. Top navigation menu displaying vertical and not horizontal. Thank you for your help Hi Folks, Anyone have any idea how I can solve this problem? I'll be most grateful. I'm trying to position a DIV element to the top-right of another fluid DIV? The blue-toned photo [please see screenshot] is going right outside of the white content area. What it should look like What it sadly does look like If I get this working, will I have problems with the body text in different pages? Say, if there's no photo, can I get the text to move up automatically? The photo is not within the flow so I have the text at a fixed position. Finally, the footer with [top-of-page arrow] seems detached when the browser is maximised. Hoping someone can help - I've been at this a week. John Hi i am currently designing my first webby with out using frams and tables for the layout (using dreamweaver 2004mx) and i am now using layers and css for the layout but my problem is this: i used to use an iframe to link things from my nav bar to load in. but now i am not using frames is there anyway to make content load inside a layer on the page or do i have to make separate pages for each link and expect it to load a new page each time? i know that usin css is alot faster than using frames but even when linking to seperate pages you get that little blink as the pages switch.... any help what so ever would be much appreciated thanks in advance N3cr0 The troubled site in question First, regarding the float issue. I did so well on this site earlier with the floats that I zipped right through it in about an hour. Looked great. After more updating and revision, I discover that in IE6, it looks great, but Net7, Fire1, and Opera 6, the floats (left and right column) are driving into the subcategory header above. I set the top margins for the floats to 85 pixels which makes it look ok in N/F/O, but lousy in IE. So I then used the * character for IE's setting. It looks fine. Question though, what am I missing and must I create the two settings for the different browsers? I'm not quite sure what changes I had made caused such a different affect. Secondly, when I open the site on IE, I get that stupid ActiveX message on top. What is causing this and how do I resolve it? That will be a problem and I guess is more of a priority to me than the floats. Thanks to all for your help. I love this board! Tim Hi people I have been developing a new cms system www.spindogs.co.uk The pages work using an autostretch facility but for some reason Firefox,Safari and IE5 Mac wont stretch. The bacground stays a set length? I initially thought it was the DOCTYPE so messed around with that but it doesnt seem to be that either? Can anyone help me please!!!! So I've tried to make my site www.thespinzone.com work for all browsers, but I'd settle for IE & Mozilla, however I have run into a big problem with IE (and it appears ONLY 7+) and Mozilla, all versions. First the IE problem is that it's adding a horizontal scroll bar on my main page, not the others, and I can only assume it has something to do with the RSS headlines positioning? screen shot 1 Now I'm having 2 problems with Mozilla: 1st: No matter how I try manipulate the CSS, the headlines won't float to the right, and they end up being squeezed next to my picture which is a waste of space and looks silly. Here is a screen shot of how it looks. Ideally I want the headlines to be on the right hand sight of the page, as far as it can be. I WANT the layout to look, MINUS the horizontal scroll bar like that first IE screen shot. 2nd: clicking or right clicking on any of the 'headline' items, moves that entire part underneath my picture and I have no idea why? In case it doesn't do that with your mozilla version, here's a screen shot The relevant CSS is on the index page so rather than me cut & paste it (unless that's preferred) then 'view source'..... I appreciate any and all help and advice. Thanks |
|||||||