|
CSS - Half Of Blog Template *disappearing* In Ie6 And 7
Looks fine in all other browsers (of course).
http://sports.theedgenews.com For some strange reason the last half of the blog blows up in IE6 and IE7. It simply does not show up. Why we don't know. When looking at the source code, it "gets" the whole page, it's just the last half is not rendered. A copy of the css is here. http://sports.theedgenews.com/css.css If anyone has any ideas at all on what to do, it would be greatly appreciated. Btw this is a design not made by me. I have become pretty familar w/ it for the blog but I have not written it. Thanks for any help. Similar TutorialsHi there, I have run out of ways to figure out this problem. I have incorporated a Blog into my website: http://www.kohlrbaby.com/blog/ It works fine in IE but not in FF. For some reason the the #contentHolder is not reading the #leftcontent and is not extending. If I try adding height: 100%; this corrects the problem for the blog page, but messes up the look of the rest of my site. Any suggestions? Help greatly appreciated!!! Here is the applicable css code: #contentHolder{ PADDING-TOP: 0px; PADDING-bottom: 30px; PADDING-left: 0px; PADDING-right: 0px; BORDER-RIGHT: #000000 1px solid; BORDER-Bottom: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BACKGROUND-COLOR: #ffffff; text-align: center; } #leftcontent p { padding: 10px 30px 0px 30px; line-height: 1.75em; text-align: left; } #rightcontent p { padding: 10px 30px 0px 30px; font-size:10px; text-align: left; line-height: 1.75em; } #leftcontent { float:left; width: 65%; background:#fff; margin-right:15px; padding-bottom:20px; BORDER-right:#000000 1px solid; POSITION: relative; } #rightcontent, #leftcontent { padding: 10px 30px 0px 30px; line-height: 1.75em; text-align: left; } h3{ line-height: 1em;} #rightcontent { line-height: 1em; } #rightcontent ul{ list-style: none; text-align: left; font-size:10px; } #rightcontent ul li { margin-bottom: 5px; } .post { border-bottom: 1px solid #000; padding-bottom: 3px; } I'm trying to achieve the effect of flipping an element down. I can get it to flip down but I want to add perspective in order to have a 3D effect. I can get perspective to work but the second half of the transformation is what I want to happen from the start, not just half way through. A lot of things I'm trying makes it go up and then down and that's not what I'm after. Code:
.flip {
-webkit-animation: flipDown 5000ms 1 linear;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: bottom center;
}
@-webkit-keyframes flipDown {
0% {
-webkit-transform: rotateX(0deg);
}
50% {
-webkit-transform: rotateX(45deg);
}
100% {
-webkit-transform: rotateX(90deg) perspective(900);
}
}
So I know that the perspective is only being transformed in the frames between the 50% and 100% marks but if I add an initial or perspective the the other keyframes it'll either jump up and then go down or just go straight down as if I didn't have perspective in there. Any help? So I came up with this lovely design for the company I'm working for, because they're website now is just utter crap. I figured instead of coding my usual way (a mess and unvalidated) I'd start off making it as clean and css-friendly as possible. I've run into some major issues, some common and some not. If any of you could help me, I would be extremely grateful. My main problem is my issue with internet explorer. I've positioned everything to match up perfectly in Firefox, the site looks great and is aligned fairly well. However, when the site hits IE, everything shifts a couple pixels and throws everything off. Anyone know why this is happening? There is also a gap at the top of the page in IE, which isn't present in firefox. I also can't figure out how to pus the footer to the bottom. I wanted another footer that stretched the whole page at the bottom (similar to the top), with a sort of 'prefooter' on top of it. I can't figure out how to just push a regular footer to the bottom, and I've tried all the fixes I can find online. Any idea why? Here is the site: Code: http://www.chromaticstudios.net/AVT/ I have 3 div's in a container, all with the same top and left coordinates width and hieght vary according to content, z-index's 1 & 2 show and hide as designed at the proper coordinates, z-index 3 shows below and out side of the container? I have attached a doc with screen shots layer definitions: Code:
#projects{
position:absolute;
top: 400;
left: 600;
margin-left:400px;
margin-top:30px;
padding-top:30px;
padding: 10px;
height: auto;
width: 300px;
z-index: 1;
visibility: visible;
}
#DBApps{
position:absoute;
top: 400;
left: 300;
margin-left:400px;
margin-top:30px;
padding-top:30px;
padding: 10px;
height: auto;
width: 400px;
z-index: 2;
visibility: hidden;
}
#resources{
position: absolute;
top: -200;
left: 300;
margin-left:400px;
margin-top:30px;
padding-top:30px;
padding: 10px;
height: auto;
width: 300px;
z-index:3;
visibility: hidden;
}
Any and all suggestions would be greatly appreciated. Hi. Ive been working on a theme I have a navbar with links on it and a background image. When you hover, you get a different background image on that section of the navbar. Im trying to style it like this: This is what it is currently like: This is my current css: Code: #nav li {
float: left;
border-right: 0px solid #d5d5d5;
text-align: center;
}
#nav li.over a, #nav a:hover, #nav a:active, #nav a:focus, #nav a.over {
color: #FFFFFF;
border-color: #2F2F2F;
background: url(../images/grad_d1.gif) repeat-x top #0088CC;
text-align: center;
}
#nav li.active a {
color: #FFFFFF;
font-style:bold;
background: url(../images/grad_d1.gif) repeat-x top #0088CC;
text-align: center;
align: center;
}
This is a link: http://toyota.identityprojects.co.uk Everything Ive tried seems to give bad results. Initally I tried putting width 75% and height 30px, centrally and vertically aligning the red gradient, but this seemed to break the whole menu and im sure its a bad way of doing it. Can anyone help me out with this, ive wasted ages on this! I am not sure the best way to colour half a table cell? Basically we have a booking system with a table that shows booked days. On the date a booking starts I want to make the right half of the table cell (actually I would prefer to use a triangle on the top right - a diagonal half) the correct colour, and the same principle applies to a departure date. I was going to just use two 50% divs for the left/right split. But the diagonal split is a bit trickier. Should I just use 2 100% height/width divs and apply a different graphic to each? Hey everyone, I'm having troubles with some DIVs. I'm trying to divide a page into 4 equal sections. If I remove the doctype declaration, it looks right in Firefox 3.5.2 In ie it is all sorts of crazy. 100% height of the inner objects seems to be referencing the window height and not the parent elements height. I'm more concerned about Firefox anyway. I expect IE to require some hacks. If I set an absolute size to the body, in px, everything works fine. But if I have the body set to %, things shrink. I tried creating a wrapper div and setting it's height/width to 50% but that didn't work either. I tried to find a solution on kravvitz and bon rouge's sites but I didn't find anything that was 100% fluid. Any ideas? HTML4Strict Code: Original - HTML4Strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> body{ width:100%; height:100%; padding:0; margin:0; color:#ffffff; background-color:#000000; } object{ float:left; clear:both; width:80%; height:100%; background-color:#cccccc; } .section{ float:left; clear:none; width:48%; height:48%; margin:1%; background-color:#333333; display:block; position:relative; } .panel{ float:left; clear:none; width: 16%; height:96%; margin:2% 2%; background-color:#cccccc; } #container{ float:left; clear:both; width:100%; height:100%; min-height:100%; background } </style> </head> <body> <div id="container"> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> </div> </body> </html>
Hi All I used Joomla to design a really simple website for someone. I currently have the problem where my text, with <h2> tag, in IE, the bottom bit of the text is cut off. For instance, a 'g' will not have its bottom 'loop'. So the text is cut off horizontally, not vertically. Works fine in Firefox. Using IE 's web development toolbar, I narrowed it down to the H2 tag, which is on a CSS file in Joomla, there are more tags nested within the <h2> tag, but they seem ok, as they are only font tags. Here is the css code of the Joomla template. Code: h2, .contentheading {
padding: 0;
font-family: Verdana, Geneva;
font-size: 1.3em;
font-weight: bold;
vertical-align: text-top;
color: #333;
text-align: left;
width: 100%; }
Any idea how to fix such a problem? I'm having some trouble with a CSS page that works perfectly fine in IE Mac/PC, Safari, and Netscape on Mac, but goes wonky on Netscape 6 and 7.1 for PC. Basically the top navigation, consisting of three images, gets chopped in half - only the bottom half of the images is displayed. The top half is simply blank. There's enough space for the rest of the image in the navbar. If I put a background-color: definition on the DIV that handles the tab, it stops where the image stops, cut off halfway up. If I RESIZE the image, using either CSS or HTML, it displays fine (but, of course, at the wrong size!) This leads me to suspect that it's some kind of refresh bug in Netscape... but I haven't found anyone else with the same problem, so maybe it's just somethin' I did. Here's the HTML that handles this part of the page: Code:
<div id="nav2">
<div id="nav-secondary-title"><img src="images/title-subpage.gif" width="127" height="20" /></div>
<div id="nav-secondary">
<div class="tab"><a href="#"><img src="images/studentstab.gif" width="77" height="27" class="navimage" /></a></div>
<div class="tab"><a href="#"><img src="images/fullartstab.gif" width="100" height="27" class="navimage" /></a></div>
<div class="tab"><a href="#"><img src="images/studentstab.gif" class="navimage" /></a></div>
</div>
</div>
And here's the relevant CSS: Code:
#nav2 { /* nav bar for secondary pages */
border-top: 1px solid #BD7445;
border-left: 1px solid #BD7445;
border-bottom: 1px solid #2D2A28;
border-right: 1px solid #2D2A28;
height: 27px;
margin:0px; padding:0px;
z-index: 0;
background: #A73600;
}
#nav-secondary-title { /*placement of title on secondary pages */
display: inline;
float: left;
height: 20px;
margin: 0px;
z-index: 1;
padding:2px 10px 0px 10px;
}
#nav-secondary { /* placement of main nav on secondary pages */
float: right;
margin: 0px 10px 0px 10px;
height: 27px;
padding: 0px;
z-index: 1;
}
.tab {
position: relative;
top: 2px;
display: inline;
padding: 0px;
margin: 0px;
}
img.navimage {
border: 0px; margin: 0px; padding:0px 6px 0px 6px;
}
Thanks - any help would be much appreciated! This is messed up....it's not the javascript cause i deleted it and it still continued...it's not the includes cause i put everything on one file....it's not the <link> cause i put it in <style> tags and it still continued http://66.195.240.220/~majdkgf/cip/ it works PERFECT in Firefox...not in Internet Explorer I had a problem earlier with my containing DIV pushing too wide which was resolved by adding "overflow:hidden" to my containing DIV. The problem is now that it's cutting off the sides of one of my graphics. At the bottom of my page, I have a link which you can click that will (through the magic of javascript) reveal divs on either side of my main content (the link at the bottom of the page says "reveal sea creature") When overflow:hidden was NOT on my containing DIV, I had the problem with all the extra space, but these revealing divs worked fine. Now that I add overflow:hidden, the extra space is gone, but the divs are cut off. I've tried pushing everything to the left which seems to make the DIV on the right work fine, but the left is still a problem. I realize this doesn't make sense without code, so here's the site. www . deepwaterchurch . com Thanks so much. I am trying to compose several pages with a similar theme. They work on FireFox and several Mac broswers that I've tried, however in IE6 for windows, my div that is position:absolute; does not appear at all. It does appear when I change the value to relative. The other browsers I've tried show the absolute div with no problems. I have no idea what is going on. http://navpress.ecommercerep.com/chicken_soup_for_soul_bible/index_IE.htm The 'invisible' div should have a green background and some text. The above is a scaled-down version of http://navpress.ecommercerep.com/chicken_soup_for_soul_bible/index.htmhttp://navpress.ecommercerep.com/ch...le/index_IE.htm http://navpress.ecommercerep.com/ch...le/index_IE.htm http://www.mbsnyder.com/index2.shtml On the "profile" and "contact" areas, there are two separate uls that are acting strange in Safari. The "profile: the rest of the story" section appears almost semi-transparent, and the "contact: email" link doesn't appear unless you mouseover it. These issues only seem to occur in Safari. Not sure what's wrong here. Any help is, as always, much appreciated! Thanks in advance. hi, im having a strange problem and i cannot see why it is doing it, i am building a 2 column layout and have floated and img to the right so and vertical align to the top so the text wraps around it, this is working fine in firefox but in ie the image is not there, the space is there, the alt attribute shows up when you hover over it and you can copy it. the page is at http://www.kevinarrowsmith.co.uk/wol/neighbourhood.php can anyone see why ie is behaving this way. Thanks. I have this test site using CSS drop down menus, but when you scroll over, they disappear. Seems to be happening in IE9, Firefox and Chrome. Can't figure it out. Any help would be appreciated! Here is the script: Code: <head>
<title>Untitled Document</title>
<style type="text/css">
body {background-color: #FFFFFF; font-family: verdana, arial; font-size: 10pt; font-weight: bold; color: #0000ff;}
.box1 {
width: 1000px;
height: 600px;
position:relative;
left: 150px;
top: 0px;
}
.blue_box {
width: 900px;
position:absolute;
top: 5px;
left: 20px;
height: 15px;
}
.box2 {
width: 1050px;
position:absolute;
top: 40px;
left: 20px;
height: 15px;
z-index: 2;
}
.main_image {
position: relative;
top: 3px;
}
.pic_box {
width: 738px; /* 10px longer than actual jpg */
position:absolute;
top: 75px;
height: 167px;
left: 20px;
z-index; 1;
}
.text_box1 {
width: 738px;
position:absolute;
top: 218px;
height: 159px;
left: 26px;
border-color: #ff0000;
}
.education_box {
width: 881px;
position:absolute;
top: 321px;
height: 350px;
left: 21px;
}
.top_news_box {
width: 136px;
position:absolute;
top: 1px;
height: 317px;
margin-left: 5px;
left: 715px;
border-color: #ff0000;
}
/*Credits: Dynamic Drive CSS Library */
/* Top menu */
.menu ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}
.menu li{
display: inline;
margin: 0;
}
.menu li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}
.menu li a {
background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d));
}
.menu li a:hover{
color: #FFFFFFF;
background:#0033CC;
}
/* Drop down menu buttons */
.blue ul { /* For all tags under <ul> (main and sub) */
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 10pt Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}
.blue li { /* Sets the properties associated with <li> */
display: inline; /* Sets li tags horizontal(main and sub) */
position: relative;
margin: 0;
}
.blue li a { /* Sets the properties associated for all anchor tags */
text-decoration: none;
padding: 5px 7px;
margin-right: 15px; /* Sets margin to 15px, which spaces out each menu button by 15px */
border: 1px solid #778;
color: white;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}
.blue li ul { /* Sets the properties for all li ul (sub menus). Rest is inherited */
position: absolute; /* All settings (e.g. left, top, etc.) will be relative to the top menu buttons (non sub menu buttons) */
left: 1px;
display: none; /* Blocks all sub menu tags */
}
.blue li:hover ul{
display: block; /* Shows all elements under each other (as opposed to next to each other) */
}
.blue li:hover ul a {
position: absolute;
width: 150px;
top: 5px; /* Amount of space the first sub menu starts from the parent button */
border-radius: 8px;
text-decoration: none;
background-color: #0000FF;
padding: 5px; /* Pads area around text 5x in all 4 directions */
border: 1px solid #cccccc;
border-bottom: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="box1">
<div class="blue_box">
<div class="menu">
<ul>
<li><a href="">Join MSSNY</a></li>
<li><a href="">Pay Dues On Line</a></li>
<li><a href="">Directory Questionaire</a></li>
<li><a href="">MSSNYPAC</a></li>
<li><a href="">Grassroots Action Center</a></li>
<li><a href="">Member Login</a></li>
</ul>
</div><!-- Close menu -->
</div><!-- Close box2 -->
<div class="box2">
<div class="blue">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About MSSNY</a>
<ul>
<li><a href="#">Divisions</a></li>
<li><a href="#">Governance</a></li>
<li><a href="#">Committees</a></li>
<li><a href="#">Member Sections</a></li>
<li><a href="#">House of Delegates</a></li>
<li><a href="#">Position Statements</a></li>
<li><a href="#">By Laws</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li><a href="#">Membership</a>
<ul>
<li><a href="#">Applications</a></li>
<li><a href="#">Pay Dues Online</a></li>
<li><a href="#">AAPI Physicians</a></li>
<li><a href="#">NYS Medical Directory</a></li>
</ul>
</li>
<li><a href="#">Medical Community</a>
<ul>
<li><a href="#">County Societies</a></li>
<li><a href="#">Speciality Societies</a></li>
<li><a href="#">State Societies</a></li>
<li><a href="#">Ethnic Medical Associations</a></li>
<li><a href="#">American Medical Association</a></li>
<li><a href="#">NYS Department of Health</a></li>
<li><a href="#">Additional Medical Links</a></li>
</ul>
</li>
<li><a href="#">Public Health</a>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="#">Physician Advocacy</a>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<li><a href="#">Practice Resources</a>
<ul>
<li><a href="#">WCB Guidelines and Fee Schedule</a></li>
<li><a href="#">EHR Implementation Services</a></li>
<li><a href="#">CME Physicial Education</a></li>
<li><a href="#">MSSNY Online Library</a></li>
</ul>
</li>
</ul>
</div>
<!-- Close blue -->
</div>
<!-- Close blue_box -->
<div class="pic_box"><img src="050211a_Original.jpg" class="main_image" width="691" height="136" border="0" />
<!-- Close top_news_Box -->
<div class="top_news_box">
<p><img src="Facebook-Twitter-Linkedin.JPG" border="0" /></p>
<p>Visit the MSSNY Blog Forum. .</p>
<p>News of New York<br />
Rate Card and Classifieds </p>
<p> MSSNY eNews 6/17/11 </p>
<p>MSSNY Legal Resources </p>
<p> *** Members Section *** <br />
Members: Click Here</p>
<p> Non Members: <br />
Browse Our Benefits Join US </p>
<p> <br />
</p>
</div>
</div>
<!-- Close pic_box -->
<div class="text_box1">To All New York Physicians: No Tort Reform HOD
Ref. Comm. Documents Health Care Reform <br />
<br />
WCB Guidelines and Fee Schedule 6-Credit CME Course on New Workers Compensation
<br />
Treatment Guidelines <br />
<br />
Influenza Surveillance: How to become an ILINET Provider for 2010-11 flu
season <br />
</div>
<div class="education_box"><img src="MED101014-Infection-Course-Image_1.jpg" width="263" height="219" border="0" /> <img src="MED100513-Course-Graphic.jpg" border="0" /></div>
<!-- Close pic_box -->
</div>
</body>
</html>
I'm having a problem with the way one of my divs is being displayed in IE. An example of the page can be found he http://www.rit.edu/~jmw9523/help/ My problem is with the "Marketing literature" menu. There are supposed to be six menu item divs that consist of an arrow div and a description div. The description is only being displayed on the last menu item div in IE, and i can't figure out why. It looks fine in mozilla. the code for the div is as follows: Code: <div id="menuSecondary"> <div id="secondaryHead" class="menuSecondaryHead">Marketing literature</div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(1, 'red');" onmouseout="rolloutArrow(1, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow1"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Creating marketing collateral that is less expensive and more effective: Nine steps</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(2, 'red');" onmouseout="rolloutArrow(2, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow2"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Creative Design and Editorial</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(3, 'red');" onmouseout="rolloutArrow(3, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow3"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemSelected">Services</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(4, 'red');" onmouseout="rolloutArrow(4, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow4"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Custom Publications</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(5, 'red');" onmouseout="rolloutArrow(5, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow5"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Worldwide Language Services</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(6, 'red');" onmouseout="rolloutArrow(6, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow6"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Beyond Paper: Electronic Collateral</div> </a> </div> </div> the css for the div elements are as follows: Code: .menuSecondaryArrow
{
float: left;
clear: left;
width: 5px;
height: 10px;
}
.menuSecondaryArrow IMG
{
border: 0px;
}
.menuSecondaryItemDesc
{
float: left;
clear: none;
position: relative;
left: 5px;
width: 150px;
top: -1px;
}
.menuSecondaryItemSelected
{
float: left;
clear: none;
position: relative;
left: 5px;
width: 150px;
top: -1px;
}
.menuSecondaryHead
{
position: relative;
left: 10px;
font-weight: bold;
font-size: 11px;
line-height: 12px;
color: white;
}
.menuSecondaryHead A:hover
{
color: black;
text-decoration: none;
}
.menuSecondaryHead A
{
color: white;
text-decoration: none;
}
.menuSecondarySpacer
{
height: 7px;
line-height: 7px;
float: none;
clear: both;
}
.menuSecondaryItem
{
width: 170px;
position: relative;
display: inline;
}
.menuSecondaryItem a:hover
{
color: white;
text-decoration: none;
}
.menuSecondaryItem a
{
color: black;
text-decoration: none;
}
.menuSecondaryItemSpacer
{
float: left;
clear: none;
width: 5px;
}
I'm hoping there is something obvious i am missing. Thanks for your help. Hello, This is my first post here, so hi everyone. I'm relatively new at css or any of it. I been working on a navbar with a javascript fader. Anyway... I finally got my buttons to work! It's time for the Smirnoff! But my button are still giving me ...! Anyway I was wondering if someone...anyone could please help me before I slam this laptop against the wall! Just joking... Everything checks out with W3C except my buttons. Here's the html: Code: <div> <span id="navcontainer1" class="button1"> <ul> <li> <a href="guardian_angel_figurines.html"><img src="images/homebuttonlight.jpg" alt="Takes You to Home Page" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> </li> </ul> </span> <span id="navcontainer2" class="button2"> <ul> <li> <a href="#"><img src="images/aboutusbuttonlight.jpg" alt="Our Policies, Mission, and Company Information" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> </li> </ul> </span> <span id="navcontainer3" class="button3"> <ul> <li> <a href="#"><img src="images/aboutfigurinesbuttonlight.jpg" alt="For More Information About Figurines" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> </li> </ul> </span> <span id="navcontainer4" class="button4"> <ul> <li> <a href="about_angels.html"><img src="images/aboutangelsbuttonlight.jpg" alt="For Angelic Understandings, Mysteries and More" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> </li> </ul> </span> <span id="navcontainer5" class="button5"> <ul> <li> <a href="policy.html"><img src="images/contactusbuttonlight.jpg" alt="To Contact Us with Your Questions, Sugestions, Ect" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a></li> </ul> </span></div> Don't laugh...they work! Here's the stylesheet: Code: .button1 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer1 ul li {
display: block;
float: left;
background: url("images/homebuttondark.jpg");
}
#navcontainer1 a {
display: block;
width: 140px;
height: 30px;
}
.button2 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer2 ul li {
display: block;
float: left;
background: url("images/aboutusbuttondark.jpg");
}
#navcontainer2 a {
display: block;
width: 140px;
height: 30px;
}
.button3 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer3 ul li {
display: block;
float: left;
background: url("images/aboutfigurinesbuttondark.jpg");
}
#navcontainer3 a {
display: block;
width: 140px;
height: 30px;
}
.button4 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer4 ul li {
display: block;
float: left;
background: url("images/aboutangelsbuttondark.jpg");
}
#navcontainer4 a {
display: block;
width: 140px;
height: 30px;
}
.button5 {
position: relative;
bottom: 130px; <-----this is weired! all the other buttons lined up with the same coordinates but this strange one.
left: 520px;
}
#navcontainer5 ul li {
display: block;
float: left;
background: url("images/contactusbuttondark.jpg");
}
#navcontainer5 a {
display: block;
width: 140px;
height: 30px;
}
W3C Validation says there is something wrong with the <ul> tag on each button html. I've tried a million different combinations but this is the only way I can get them to work. Only thing is they create empty space around them and unless I put something "above" them they disappear all together (where the go I have know idea!) I was just thinking if they could somehow "validate" then maybe they would be more predictable. Any suggestions? Thanks I am currently designing a website using CSS and I have a peculiar problem where some images are appearing and then disappearing in IE6. They are showing up fine in IE7 and Firefox. The image in question is not a background image. On another page I am using background images for bullet points and the first two on the page are appearing. The third appears and then disappears. This is only when viewing in IE6 and it is only happening with these two particular pages. The thing they have in common is both are running the body ID "page8" and each image that vanishes represents the last image in the content area. Can anyone shed any light on this for me? I figure it has to be a stylesheet problem with a peculiarity in IE6 for which I would need to write around it. Question is what am I suppose to write around? Code: http://lakesideint.server266.com/about/getting_here.php is the page where the image disappears. Code: http://lakesideint.server266.com/business/index.php is the page where the one bullet point appears and disappears. Cheers Terry I have a page and it's a massive mess of nested tables and abs-positioned divs. Amongst these are two that become visible/invisible on the onclick of a checkbox. They start out with display:none inline. Still with me? There arent any floating elements in use, and pretty much everything has a width and height specified, so if there's some hasLayout freakyness going on i'd love to know what. Anyway, in IE7 when you click said checkboxes their target divs and thier contents appear correctly - but the divs' borders are missing, re-toggling the checkbox off and on again shows the border and then again for any subsequent re-showing. it's just the initial setting of display:'' I can't post the code but it looks something ten times freakier than the attatched recreation attempt, unfortunately i can't rectreate it, but you'll get the idea. Can anyone help? I'm going to try running some javascript after the page has loaded to do a quick double toggle to simulate the first no-border instance! |
|||||||