|
CSS - Css Drop Down Displays Blank Sections In Ie7
Hi, my css drop down menu seems to be working fine in firefox, but there are a few problems in IE. It didn't even work in IE7 until I added
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 1. In IE7, if you first hover over the link to get the drop down menu to show, move away, then hover over the menu again, it will show the blank sub menus of the one you last have opened. This is hard to explain. Please see my webpage for what I mean. http://ling.twinner.com.tw/uselink/index.php Move your mouse to the Products link at the top. 2. My menu seems to load slow. Is it because I have many sub menus or is my css not efficient? 3. How do I set the sub menu height to auto? Here is my css: http://ling.twinner.com.tw/uselink/menu_style.css Any suggestion is greatly appreciated. Similar TutorialsI am working on a web page, and am all but done, but I am having one final problem with it. The css drop down menu works fine except for one issue... when you scroll down on one of the pages, and then go to the css menu bar a gap appears between the menu bar and the sub menu options that drop down. How can I get this menu to always drop down DIRECTLY below the main menu bar without the gap? ___________ Here is the SpryMenuBarHorizontal css _____________ @charset "UTF-8"; /* SpryMenuBarHorizontal css - Revision: Spry Preview Release 1.4 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, an auto width box with no margin or padding */ ul.MenuBarHorizontal { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: auto; padding-left: 0px; padding-right: 0px; position: relative; background-image: xxx; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li { margin: 0; padding: 0; list-style-type: none; font-size: 16px; position: relative; text-align: center; cursor: pointer; width: ; float: left; background-image: xxx; padding-left: 0px; padding-right: 0px; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul { margin: 0; padding: 0; list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; width: 8em; position: fixed; left: -1000em; background-image: xxx; padding-left: 0px; padding-right: 0px; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: auto; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { width: 9.2em; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; margin: -5% 0 0 95%; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible { left: auto; top: 0; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul { border: 0px solid #000000; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { display: block; cursor: pointer; color: #2C2A2B; text-decoration: none; padding-left: 24px; padding-right: 24px; padding-top: .5em; padding-bottom: .5em; background-repeat: repeat; background-image: xxx; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus { color: #FFF; display: block; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible { color: #FFF; display: block; } /******************************************************************************* 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.MenuBarHorizontal a.MenuBarItemSubmenu { background-image: XXX; background-repeat: repeat; } /* 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.MenuBarHorizontal ul a.MenuBarItemSubmenu { background-image: XXX; background-repeat: repeat-x; } /* 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.MenuBarHorizontal a.MenuBarItemSubmenuHover { } /* 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.MenuBarHorizontal ul a.MenuBarItemSubmenuHover { background-image: xxx; background-repeat: no-repeat; background-position: 95% 50%; } /******************************************************************************* 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.MenuBarHorizontal iframe { position: absolute; z-index: 1010; } /* 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.MenuBarHorizontal li.MenuBarItemIE { display: inline; f\loat: left; background: #FFF; } Thank you so much for your help, I have a deadline that is coming up very quick... I'd appreciate any help I could get. _______________ my css is sloppy , but at this point with the deadline approaching, I really just need to get this to work properly, and I have a feeling its as simple as a few lines of code changed.... Code:
<form action="">
<div>
<select id="about_menu" name="about_menu"
onchange="window.location.href=this.form.about_menu.options[this.form.about_menu.selectedIndex].value;"
title="Go to About pages">
<option value="">About</option>
<option value="http://myblog.com/about-the-blog/">About The Blog</option>
<option value="http://myblog.com/welcome/">Welcome</option>
</select>
</div>
</form>
I use <option value="">About</option> as self labeling. I would like the width of the form to be so that there won't be a blank after About even if other options are longer. The issue is that About is going to be translated in several languages and thus I can't rely on a determined value for the width. Hi... I am not a coder, Im new at this. Im not even really sure how to explain my problem either, so bear with me, please. I am working on a theme for a site that allows you to edit the css style applied to the page, like myspace.com. Unfortunately there are limitations to this, like how many section IDs there are and such. In order to make a custom page, I am using ordered lists in BBcode. In forefox, I was able to move the ordered lists outside of their section by using positioning, but unfortunately in IE, it would not allow this. Basically the lists would be hidden/invisible outside of the section element parameters. So, again in order to work around this, I made the section the ordered lists were in cover the entire page. Firefox handled this fine, and the elements on the page worked together so long as text was not right on top of links etc. IE, no such luck. The links in another section do not activate even though they are not visually overlapping. This creates a problem for me, as I will now need to make another ordered list to create links which will activate. Is there a way I can get around this? Because I have a section which covers the entire page in IE, and overlaps onto other sections, I'm looking for code which will allow the sections in IE to overlap without causing one section or the other to behave incorectly. Anyway, here is the link to my page so you can see what I mean. The links in question are the little glowy circles. They work in firefox, but they only appear in IE and will not act as links. Any help would be appreciated. I dont mind re-doing the code and the lists in order to avoid adding more code to create links which work. http://www.gaiaonline.com/profile/index.php?view=profile.ShowProfile&item=305091 Thanks Kim Hello, I'm still playing around with CSS and I put together this test, to see if I could create tabs on a page.... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Site</title>
<style type="text/css">
/* ----- ALL ----- */
* {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
/* ----- TABS ----- */
#tabs {
float:left;
}
#tabs, #tabs ul, #tabs li {
margin:0;
padding:0;
list-style:none;
}
#tabs a {
background-color:#AE5700;
color:#FFFFFF;
margin-left:1px;
margin-right:1px;
margin-bottom:1px;
padding:5px 5px 5px 5px;
text-decoration:none;
cursor:pointer;
float: left;
}
#tabs a:hover {
color:#000000;
background-color:#FFCC99;
}
#tabs .active a {
color:#000000;
background-color:#FF9900;
padding-bottom: 1px;
margin-bottom:0;
}
/* ----- SECTIONS ----- */
#section1 {
background-color:#FF9933;
padding: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li class="active"><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>
<br /> <!-- If I remove this, the section overlaps the tabs! -->
<div id="section1">
Hello
</div>
</body>
</html>
I know I know, it's very basic! The problems im trying to figure out are as follows.... 1. This code displayed in Firefox, works as i'd expect. But under the dreaded IE, it displays the tabs diagonally down the page. I know that IE doesn't work as it should, but how do I get the tabs to look the same in IE as they do in Firefox (ie... display them correctly!) 2. The tabs are meant to sit right on top of the section of orange. Using the BR tag (commented in script), I can get it to move down a little bit - but how do I achieve positioning the section box right underneath the tabs using CSS? All help is appreciated! JT p.s. Attached a screenie of the browser output for reference! Hi Guys! Most of the links in my document are set to #ffffff, because they have a dark background. I have 'content' section that I want to show blue links. I tried adding the following code into my style sheet: PHP Code: a.content:link { color: #0000FF; text-decoration: underline; } a.content:visited { color: #0000FF; text-decoration: underline; } a.content:hover { background-color: #6666FF; text-decoration: underline; } And nothing!? (apart from the layout crapped up!!!!) Could someone point me in a better direction? Full CSS below! Thanks Charlie PHP Code: html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(images/newback.jpg); background-position:top right; background-repeat:repeat-y; background-color:#ffffff; font-family: sans-serif; font-size: .7em; } #wrap { background-image:url(images/newback150px.jpg); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} div#navbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#formbox { color: #000000; padding: 2%; border: #000044 solid 1px; } div#userbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} #header { background-color: #000044; background-image:url(images/wel.jpg); width 100%; background-repeat: repeat; border-bottom: 2px #000000 solid; color: #ffffff; margin:0; padding:0; height:100px; } } #left { float:left; width:149px; background-image:url(images/newback.jpg); background-repeat: repeat; color: #ffffff; text-align:center; background-color: #000044; border-right: 1px #000000 solid; } #main { position:relative; margin-left:200px; } #content { text-align:center; padding:4px; margin-right:200px; margin-bottom:150px; text-align:left; } #clearfooter { clear:both; height:80px; overflow:hidden; } #footer { height:40px; background-color: #000044; border-top: 2px #000000 solid; margin:0; padding:0; background-image:url(images/newback.jpg); background-repeat: repeat; margin-top:-0px; color: #ffffff; text-align:center; } div#newsbar {padding: 0%; text-align: center; height:140px; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-left: +150px; margin-right: +10px; margin-top: -180px; border: 2px #000000 solid; width: auto;} code { font-size:0.8em; border:1px solid navy; background-color:white; color:#333333; padding:10px; display:block; width:80%; margin:10px auto; overflow:auto; } h1 {font-size: 1.4em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h2 {font-size: 1.3em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h3 {font-size: 1.2em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h4 {font-size: 1.1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h5 {font-size: 1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} a:link {color: #ffffff; text-decoration: underline;} a:visited { color: #ffffff; text-decoration: underline;} a:hover {color: #dedbcb; background-color: #0000FF; text-decoration: underline;} Hi all, I have a 2-column layout for my web pages plus a header and footer section. The left column contains a navigation menu (which grows and shrinks depending on the current menu selection), and the right column contains the main text and other information. I float the nav menu left. No problem. But when the footer is displayed (and I have set "clear: both" on the footer element to try and keep it at the bottom), it will appear somewhere in the middle of the menu in cases where the menu is long (vertically) and the main content area contains only a few lines of text. My current method to drop the footer below the menu is very klunky, and probably what most people do (unless they know of a better way). Yes, the series of <br /> tags before printing the footer. Is there a better way of ensuring that the footer is placed where it should (below all other content) so I don't have to insert all those <br /> tags? My CSS for the page layout is: Code: #doc { /* Main document area */
margin-left: 5%;
margin-right: 5%;
margin-top: 5px;
border: solid 1px #900;
}
#logo {
text-align: center;
background: #c30000;
}
#main {
margin-left: 150px;
margin-right: 0%;
padding: 10px;
border-left: solid 1px #c00;
background: #fff;
color: #000;
}
#nav {
position: absolute;
margin-left: 0%;
float: left;
padding: 0px;
border: 0px;
top: 110px;
width: 150px; /* Same as margin-left setting in #main */
color: #000;
}
#footer {
clear: both;
margin-left: 0%;
margin-right: 0%;
border-bottom: 2px solid #906;
background-color: #c00;
color: #ddd;
font-weight: bold;
text-align: center;
line-height: 1.5;
}
And a typical html page would be structured thusly: Code: <!-- USUAL HTML BEGINNING STUFF HERE -->
<body>
<div id="doc">
<!-- Logo image -->
<div id="logo">
<!-- LOGO GOES HERE -->
</div>
<!-- Main content window -->
<div id="main">
<!-- MAIN CONTENT GOES HERE -->
</div>
<!-- Navigation menu -->
<div id="nav">
<!-- NAV MENU CODE HERE -->
</div>
<!-- footer -->
<div id="footer">
<!-- FOOTER CODE HERE -->
</div>
</div>
</body></html>
Is my CSS coding incorrect, or is this a universal problem? Any help/suggestions will be much appreciated. i have just finished making a site for a collective of illustrators I belong to, and now I'm hearing back that some people are having trouble with it. It's at www.illustratorselbow.com (I'm not allowed to post a url without spaces!) & i'm hoping people might be able to have a look at it & view the source and help me out. If you click on somebody's name, you see the thumbnails on the right and the image on the left. When you compress the window, the thumbnails jump about and shrink. I want to make it so this can't happen- I'd rather that the section with the main image in it compressed a bit, or would side-scroll. Any idea how to do this? I'm pretty new to CSS too so I don't really know how to fix this. It's just a drag because on computers with smaller screens/resolutions, the thumbnails look really messy. (Bear in mind that I have extremely basic knowledge of html/css/php, i hand code rather than use dreamweaver etc, and I've never used php or css before this site. I started using it because I keep hearing that frames are bad news nowadays, but it's been sooo much trouble with my limited abilities... alas) Hello, I can't seem to figure out how to make my CSS drop down menu work the way I want it to. I am using an id in the body tag and a class in the navigatin links so the style sheet will mark what section of the site you are in by making the background change color. This works. The problem is, now that I have the sections being marked, the highlight no longer works. How can I get the highlight to work in the section you are in? I have been experimenting for hours but I can't make it work. http://www.tpxdesign.com/test/Valliant/alpha/index7.php My nav menu code and nav style sheet: Code: <!--[if !IE]><!-- start nav --><![endif]-->
<div id="side_nav_bar" class="floater">
<div id="nav_menu">
<ul id="nav">
<li><a href="demoreel.php" class="port">Portfolio</a>
<ul>
<li><a href="demoreel.php" class="port">Demo Reel/s</a></li>
<li><a href="shorts.php" class="port">Shorts</a></li>
<li><a href="musicvid.php" class="port">Music Video</a></li>
<li><a href="comvid.php" class="port">Commercial</a></li>
<li><a href="miscvid.php" class="port">Misc. Video/Film</a></li>
<li><a href="gallery.php" class="port">Photo. Gallery</a></li>
</ul>
</li>
<li><a href="services.php" class="serv">Services</a>
</li>
<li><a href="newupdate.php" class="newe">News & Events</a>
<ul>
<li><a href="newupdate.php" class="newe">News/Updates</a></li>
<li><a href="eventblog.php" class="newe">Event Calendar</a></li>
</ul>
</li>
<li><a href="bio.php" class="about">About Valliant</a>
<ul>
<li><a href="resume.php" class="about">Resume</a></li>
<li><a href="bio.php" class="about">Biography</a></li>
<li><a href="contact.php" class="about">Contact</a></li>
</ul>
</li>
<li><a href="links.php" class="link">Links</a></li>
<li><a href="index7.php" class="home">Home</a></li>
</ul>
</div>
</div>
<!--[if !IE]><!-- end nav --><![endif]-->
Code: ul {
margin: 0;
padding: 0;
list-style: none;
width: 199px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 198px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
#home .home, #about .about, #link .link, #newe .newe, #serv .serv, #port .port
{
color: #000;
background-color: #eee;
}
Hi, I have an unordered list displaying contact info for several people. For example: name1 address1 phone1 name2 address2 phone2 name3 address3 phone3 I'd like there to be a blank line between each person's info (just like it is displayed above). To do this, I added line breaks after each list item's closing tag. Here is the code: Code: <ul> <li>name1<br />address1<br />phone1<br /></li><br /> <li>name2<br />address2<br />phone2<br /></li><br /> <li>name3<br />address3<br />phone3<br /></li><br /> </ul> In Safari and Firefox (Mac and Win) there is a blank line between each section of contact info (the desired effect). In IE6, there is no blank line. It looks like this: name1 address1 phone1 name2 address2 phone2 name3 address3 phone3 I'm sure there is a fix out there, I just haven't found it yet. Any help is appreciated. - Tim My page seems to work in IE7, Firefox & Safari but in IE6 it all is shifted to the right. Any help will be greatly appreciated as I am new to this. Here is my code: Code: .css
body
{
background-color: #000000;
}
#background {
position:absolute;
width:600px;
z-index:1;
left: 300px;
top: 10px;
}
#clientbackground {
position:absolute;
width:600px;
z-index:1;
left: 300px;
top: 10px;
}
#apDiv1 {
position:absolute;
width:90px;
z-index:1;
left: 380px;
top: 90px;
}
#apDiv2 {
position:absolute;
width:78;
z-index:2;
left: 355px;
top: 192px;
}
#apDiv3 {
position:absolute;
width:78;
height:113;
z-index:3;
left: 350px;
top: 313px;
}
#apDiv4 {
position:absolute;
width:97;
height:90;
z-index:4;
left: 362px;
top: 433px;
}
#apDiv5 {
position:absolute;
width:179;
height:230;
z-index:1;
left: 400px;
top: 262px;
}
#apDiv6 {
position:absolute;
width:61;
height:96;
z-index:5;
left: 1015px;
top: 26px;
}
#content {
position:absolute;
width:550;
height:96;
z-index:5;
left: 496px;
top: 146px;
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: none;
padding: 5px;
left: 1200px;
border: none;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 25;
left: 0px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
.html
<html>
<head>
<title>*******</title>
<link rel="stylesheet" type="text/css"
href="style.css" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('images/about.jpg','images/clients.jpg','images/work.jpg','images/facility.jpg','images/client.gif')">
<div id="background"><img src="images/background.gif" width="800" height="600" /></div>
<div id="apDiv1"><a href="about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/about.jpg',1)"><img src="images/about.jpg" name="Image1" width="90" height="94" border="0"></a></div>
<div id="apDiv2"><a href="clients.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/clients.jpg',1)"><img src="images/clients.jpg" name="Image2" width="77" height="113" border="0"></a></div>
<div id="apDiv3"><a href="work.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/work.jpg',1)"><img src="images/work.jpg" name="Image3" width="78" height="113" border="0"></a></div>
<div id="apDiv4"><a href="facility.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/facility.jpg',1)"><img src="images/facility.jpg" name="Image4" width="97" height="90" border="0"></a></div>
<div id="apDiv6"><a href="(URL address blocked: See forum rules)" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/client.gif',1)" target = _blank><img src="images/client.gif" name="Image5" width="61" height="96" border="0"></a></div>
</body>
</html>
Thanks for your help!!! Hi all, There is a serious positioning problem going on with my page. It looks right in Firefox3, but in IE7 the spacing is messed up and the top left photo fails to display. I imagine it has something to do with the padding or margin for my text. Please help! I have validated in both CSS and HTML. Also, can anyone recommend any sort of tool to help with things like this in the future? I am in an intro web class so I failed to cross check browsers, bear with me... Thanks in advance, Amanda Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Dachsund Rescue of Houston</title>
<style type="text/css">
body{
background: url(images/background.jpg) no-repeat top center;}
#contain{
width: 800px;
height: 640px;
margin-left: auto;
margin-right: auto;
}
#menu{ width: 466px;
height: 98px;
float: right;
margin-top: 15px;
}
#dog{ width: 491px;
height: 257px;
margin-top: 19px;
margin-left: 22px;
float: left; }
/* margin-top is the menu plus the remaining pixels (19) so, from the very TOP of the page. I guess you keep "adding"
*/
#community{ float: right;
background: url(images/community_spot.jpg) no-repeat;
width: 231px;
height: 259px;
margin-top: 19px;
margin-right: 22px;
}
#arrival{
clear: right;
background: url(images/arrivals.png) no-repeat;
width: 800px;
height: 286px;
}
.communitytext {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 160px 10px 0 15px; /*up, right, bottom, left */
margin: 5px auto 5px 10px; /*up, right, bottom, left */
}
.arrivaltext {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 105px 10px 0 10px; /*up, right, bottom, left */
margin: 15px 10px 5px 10px; /*up, right, bottom, left */
}
.arrivaltext2 {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 3px 10px 0 10px; /*up, right, bottom, left */
margin: 15px 10px 5px 10px; /*up, right, bottom, left */
}
</style>
</head>
<body>
<div id="contain">
<div id="menu">
<a href="about.html"><img src="images/about_btn.png" alt="About button" title="About" border="0"/></a>
<a href="adopt.html"><img src="images/adopt_btn.png" alt="Adopt button" title="Adopt" border="0"/></a>
<a href="help.html"><img src="images/help_btn.png" alt="Help button" title="Help DROH" border="0"/></a>
<a href="resources.html"><img src="images/resources_btn.png" alt="Resources button" title="Resources" border="0"/></a>
<a href="contact.html"><img src="images/contact_btn.png" alt="Contact button" title="Contact" border="0"/></a>
</div>
<div id="dog">
<img src="images/jumping.jpg" alt="" title="" border="0" /> </div>
<div id="community"> <p class="communitytext">If you love animals, fostering allows you to go through 'em and love a whole bunch of 'em - without having to keep 100 dogs at your house. MORE...</p></div>
<div id="arrival"><p class="arrivaltext">Luke is a happy-go-lucky, love bug. He is between 1-3 yrs old, with black/tan dapple. He is mixed with another breed which we suspect to be a Spaniel or Catahoula. He stands about 11/2 feet tall to the top of the head and weighs 20 lbs. </p> <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with
him. He has an intense alluring stare to draw you in, then he slowly cuddles up next to you, and when you've fallen for him, he covers you with gentle kisses. </p> <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with
him. </p>
</div>
</div>
</body>
</html>
Hello, With following css for header Code: div#header{
height:75px;
background-color:#ffffcc;
}
I am getting three different views in IE, FF, Opera. In IE entire background color is pale yellow, In FF only the line is pale yellow. In opera line and area below it is pale yellow. Here goes goes html. Code: <div id="header"> <h3 align = "center">Welcome to <b>Your Space</b></h3> </div> What is going wrong here? Thank you. hey all, i am trying to implement coolmenus dropdown menus on a site but i am having problems. In IE it is fine it is in the rght place, but in mozFF it is positioned at the top of the page wierd here is the CSS for it which i think is possibly the problem Code:
/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
/*Style for the background-bar*/
.clBar{position:absolute; top:auto; width:10; height:10; background-color:yellow; layer-background-color:yellow; visibility:hidden}
/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding-top:3px; font-family:georgia; font-size:12px; font-weight:bold; text-align:center; }
.clLevel0{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel0over{background-color:#A4AA54; layer-background-color:#A4AA54; color:#ffffd2;; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#667138; layer-background-color:#667138}
/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:georgia; font-size:11px; text-align:center;}
.clLevel1{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel1over{background-color:#A4AA43; layer-background-color:#A4AA54; color:#ffffd2; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#A4AA54; layer-background-color:#A4AA54}
/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold; text-align:center;}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:#667138; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}/* CSS Document */
i can get it right in FF by changing this value in the javascrpt Code: oCMenu.fromTop=0 //this works for IE oCMenu.fromTop=139 // This works for Moz FF i can't get both correct at the same time! I am trying to position this menu in a DIV on my page which has the settings Code:
#TitleBar {
position:absolute;
top: 0px;
left: 0px;
padding: 15px;
padding-left:10px;
width:100%;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:170px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color: #A4AA54;
border-top: 1px #A4AA54 solid;
border-bottom: 1px #A4AA54 solid;
border-width:1px 1px; /* top and bottom borders: 1px; left and right borders: 0px */
background-color:#A4AA54;
background-image:url(../images/logo/gglogo.JPG);
background-position: 1% 2px;
background-repeat:no-repeat;
z-index:0;
/* This is a fix for IE% */
voice-family: "\"}\"";
voice-family:inherit;
height:170px;
width:100%; /* the correct height */
}
/* "be nice to Opera 5" */
body>#TitleBar {height:170px; width:100%;}
if anyone can help me with this that would be great!! i have posted on the dhtml coolmenus forumy thing but i dont think it is very active, certainly not as good as devshed thanks in advanced RF The page with the problem is this one: http://www.yazmin.net/teamintraining/photos.php When the page loads in IE (I'm using v6, but this seems to be happening in all versions of IE), you can see my introduction text display, but then it looks like another div is being loaded and the text promptly dissappears. I don't have this problem in other browsers. Below is the relevant CSS and HTML code: CSS: Code:
#content {
background-image: url(/teamintraining/images/bkg.gif);
margin: 30px 13em 0 3em;
padding-right: 60px;
}
#navigation {
color:#006600;
}
.img-shadow {
float:left;
background: url(/teamintraining/images/shadowAlpha.png) no-repeat bottom right !important;
background: url(/teamintraining/images/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}
HTML: Code:
<body>
<br><h2>Welcome to Jason and Yazmin Wickham's Team In Training Update Site!</h2><br><br>
<div id="main">
<div id="menu">
<div align="center"><?php include("includes/navigation.htm"); ?><p> </p></div>
</div>
<div id="content">
<h1>Photo Gallery</h1>
<p>As Jason and I go through training, we will make an effort to post pictures here for viewing.</p>
<p><?php echo $gallery->getThumbnailsDisplay() ?></p>
<br style="clear:both" />
</div>
</div>
</body>
Any ideas? Thanks! I designed a site,caringfriendsinc.com . Everything displays fine in Firefox, but in IE7 the images in the center of the services page are spaced apart just a little bit. It is noticeable around the edges. I can't seem to figure out how to fix it. Thanks in advance. I was playing around with the CSS on my blog to try and get the header alligned correctly. In Firefox I added both a bottom and top margin to the #logo to make it align correctly. the bottom margin figure was -45px;. When checking the site in Chrome there was still a large gap under the logo. So after a little trial and error it seemed that Chrome wanted -125px as the bottom margin figure to achieve my desired results. So I've left it at -125px but then back on Firefox the navmenu is now aligned wrong. Any ideas? **EDIT** I can't link to my site so you can see it as I'm a new user. I am attempting to put together a site with CSS navigation for the first time. Thanks to people much smarter than I, I've been able to stitch other's lessons into something almost workable. THE PROBLEM I have a horizontal menu with a submenu. This submenu should also display horizontally. It does in FF, but not in either IE6 or IE7. In these browsers, it displays vertically. I have tried a lot of things and finally gave up. I validated my code and was given a pass. I've tried narrowing down the problem and have tried searching for the answer but I just can't figure it out. If needed, you can view the problem at www.foundationfitnesscenter.com/schedule (ignore the crappy header image, it's just there to show an idea for now). The CSS where I feel the problem must be: Code: #nav #schedule-sub,
#nav #education-sub,
#nav #classes-sub {
display:none;
width:90%;
}
body.classes #nav ul#classes-sub a,
body.schedule #nav ul#schedule-sub a,
body.education #nav ul#education-sub a {
background-image:none;
color:#3300FF;
font-size:100%;
font-weight:bold;
line-height:10px;
margin-right:4px;
padding:2px 10px 2px 10px;
text-decoration:none;
}
body.classes #nav ul#classes-sub,
body.schedule #nav ul#schedule-sub {
display:block;
position:absolute;
left:15px;
top:95px;
}
body.education #nav ul#education-sub {
display:block;
position:absolute;
left:175px;
top:95px;
}
The HTML Code: <ul id="nav">
<li class="home-list"><a href="/index.php">Home</a></li>
<li class="classes-list"><a href="../classes/">Classes</a>
<ul id="classes-sub">
<li><a href="../classes/pilates.php">Pilates</a></li>
<li><a href="../classes/dance.php">Dance</a></li>
<li><a href="../classes/gyrokinesis.php">Gyrokinesis</a></li>
</ul>
</li>
<li class="schedule-list"><a href="../schedule/">Schedule</a>
<ul id="schedule-sub">
<li><a href="../schedule/class-schedule">View All Classes</a></li>
<li><a href="../schedule/enroll-private.php">Enroll - Private</a></li>
<li><a href="../schedule/enroll-group.php">Enroll - Group</a></li>
</ul>
</li>
<li class="education-list"><a href="../education/">Education</a>
<ul id="education-sub">
<li><a href="../education/pilates/">Pilates</a></li>
<li><a href="../education/dance/">Dance</a></li>
<li><a href="../education/gyrokinesis/">Gyrokinesis</a></li>
</ul>
</li>
<li class="about-list"><a href="../about/">About</a></li>
<li class="contact-list"><a href="../contact/">Contact</a></li>
</ul>
Thanks for taking the time to read my question. I have a MainBox that I have all my page in. <div id="MainBox"></div> I had a height set and both IE and FF displayed ok, but if the content was higher than the box, FF expanded and IE didn't. So I took the height off and IE expaned and FF shrunk to nothing. What's up with that? I've attached the code and the one pic. What can I do to get them to display the same? right now all files go in the same folder. Thanks, Brad I have a project in Visual Studio 2008, ASP.Net, 2.0. We are going from IE6 to IE8 and I'm making the changes for this move. I did all these changes by deploying the files to a test web server because I still had IE6 on my machine. When I publish to our web server the pages render like they should. I got IE8 last night so I figured I could just test it out on my box. When I run it off my box, the pages look all screwed up. I don't understand how they can look fine on the web server but not on my box. The same version of IE8 is installed on the test box I'm working with and my machine. Anyone ever encountered this or know of anything to check? If you have questions or need more info, ask. ok, I found the fix here. many thanks anyways. |
|||||||