|
HTML - Positioning Problems Ie Vs Firefox
Hi all,
First post here hope someone can help. I'm creating a portfolio web page for my 3D work and using this to learn a bit of web design. My current problem comes from using absolute positioning to get text to float over a background image in a precise location. I have this as I want it in Fiirefox 2.0.0.6 but the text all appears a fair bit higher in IE (I have looked using IE 6 on its own and by changing the render mode to IE in Firefox). I realise I need to do a fair bit of validation and refinement to the site but at the moment I want to get this alignment issue sorted so the site is at least visible while I work on other elements. Page url: www.iamjames.co.uk The text in question is on the used on all pages! Thanks in advance James Similar TutorialsI've run into a few problems that don't appear in firefox but do in Internet explorer..The first problem I have is that in IE the content box on the right is bumped down, it looks exactly the way I want in FF, but not in internet explorer. The next problem I'm having is the banner in IE..It seems as if theres a pixel or two underneath of the banner I can't get rid of... Also, any ideas on how I can center the navbar? I can't seem to get it to go in any browsers... page: http://www.ssvfd.com/newsite/history.html css file: http://www.ssvfd.com/newsite/style.css Hi guys. Sorry if I'm inconveniencing you, but I have a really big problem that I can't work out. http://automata.firephoenixnet.com/design/ Could you take a look at that in Firefox and then in IE? Did I miss a margin or something? And, is there a way I can get my footer div always at the bottom of the page without setting a margin-bottom for the sidebar div? Many thanks guys. Usually I wouldn't be so, well...rude, but this is very urgent, I need to finish this website by college tomorrow because if I don't hand in my work, I fail the course. This is in no way illegal, I'm an art student, so I'm being marked solely on the layout and such, not on the coding! As such, any comments or critiques would be greatly appreciated also. Here are some pictures demonstrating my problems: http://img504.imageshack.us/img504/1956/70406583qo6.jpg http://img481.imageshack.us/img481/576/74706440aq5.jpg What's wrong is the positioning of the navigation and main content... the titles should be at their respective black bars right near the top, just below the banner image. I've gotten so rusty, I don't even remember how to do something so simple. Also, for some reason the header titles don't want to be white instead of black. What am I doing wrong? Here is the CSS: Code: body
{
margin: 0;
padding: 0;
background-color: #dcd8e5;
}
body, p, td
{
font-family: trebuchet ms, sans-serif;
font-size: 12px;
color: #000000;
cursor: default;
}
a
{
font-family: trebuchet ms, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
a:hover
{
font-family: trebuchet ms, sans-serif;
font-size: 12px;
color: #afa7c1;
font-style: italic;
cursor: help;
}
#wrap
{
margin: 0 auto;
width: 906px;
background-image: url(container.jpg);
}
#topbanner
{
width: 906px;
}
.header
{
padding: 0px;
font-size: 14px;
text-align: center;
text-transform: uppercase;
margin: 2px;
font-color: #ffffff;
font-weight: bold;
}
#nav
{
float: left;
width: 260px;
padding: 20px;
}
#main
{
float: right;
width: 606px;
padding: 20px;
text-align: justify;
top: 300px;
}
#footer
{
clear: both;
text-align: center;
}
And here is the HTML: HTML Code: </head> <body> <div id="wrap"> <div id="topbanner"> <img src="topbanner.jpg" alt=""/> </div> <div id="nav"> <p class="header">Navigate</p> <p> <a href="#">Home</a> <br /> <a href="#">Gallery</a> <br /> <a href="#">Prints</a> <br /> <a href="#">Affiliates</a> <br /> <a href="#">About</a> </p> </div> <div id="main"> <p class="header">Welcome</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p><p> Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem. </p><p> Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam. </p> </div> <div id="footer"> Site & Content © Nicole Turner, 2007, all rights reserved <img src="container.jpg" alt=""> </div> </div> </html> Any help, particularly of the super-speedy variety, is greatly appreciated! Hey guys I'm having a terrible time getting some graphic logos to layout. I know the coloring right now is not looking up to par either so don't judge me too bad I have a header div with a nav div inside and then a content div below this with a swf slide show inside. Basically inside the header div I have 5 graphics and then a nav div nested inside below that. My problem is that I want 2 of the logos aligned to the left and close to centered up/down inside the header div, then I want the main masthead logo centered in the middle of the header div up/down and left/right, and finally I want the other 2 logos floated right and centered up/down. I'm trying various methods and the best I have so far shows the middle masthead logo not correctly centered, and the 2 left logos floating left, but the far 2 right logos do not show up at all. The page is located at http://www.atlanta-web.com and I'll past all of my code below. index.html snippet Code:
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#000080" alink="#800000" leftmargin="0" topmargin="5" marginleft="0" margintop="5">
<script type="text/javascript" src="fsmenu_commented.js"></script>
<script type="text/javascript" src="menuset.js"></script>
<link rel="stylesheet" type="text/css" href="listmenu_h.css" />
<link rel="stylesheet" type="text/css" href="listmenu_h_settings.css" />
<style type="text/css">
#navitoolbarcontainer a {
line-height: 16px;
}
</style>
<div id="header">
<img class="award1" src="nahb.gif" /><img class="award2" src="gahomebuilders.gif" />
<center><img src="Jhomes.jpg" /></center>
<img class="award3" src="southernlivingmember_sm.gif" /><img class="award4" src="lobb.gif" />
<!-- START TOP TOOLBAR -->
<!--<div id="heightcontainer"></div>-->
<div style="width: 100%;" id="navitoolbarcontainer">
<div style="margin: 0px; padding: 0px; width: 100%;">
<div id="navitile" style="width: 100%;">
<ul class="menulist" id="listMenuRoot" style="height:22px;">
<li style="margin-top:0px;">
<a class="gt" href="index.html" style="font-size: 10px; font-family: arial,verdana,helvetica; text-decoration:none;"> <b>Jeffery Homes Inc.</b> </a>
<ul id="listMenu-id-1">
.
.
.
NAV Bar HTML Cut for space sake
.
.
.
<div style="margin-top: 0px;" id="lightgrey">
</div>
</div>
</div>
</div>
</div>
<div id="content" style="width: 100%; background-color: #6B6637">
<div id="slideshow">
<object width="600" height="350">
<param name="movie" value="slideshow1.swf" wmode="transparent">
<embed src="slideshow1.swf" width="600" height="350" wmode="transparent">
</embed>
</object>
<br />
<br />
</div>
</div>
<!-- END TOP TOOLBAR -->
css file1 Code: @charset "UTF-8";
a.gt{ text-decoration:none}
a.gt:hover{text-decoration:none}
a.gt:visited{text-decoration:none}
a.gt:link{text-decoration:none}
a.gt:active{text-decoration:none}
#header { margin: 0px; padding: 0px; width:100%; min-width:830px; width:100%; background-color: #AFAB73; position: absolute; left: 0px; top:0px; font-family: arial, verdana, helvetica; font-size: 8px; white-space: nowrap; z-index: 0}
.award1 { float:left }
.award2 { float:left }
.award3 { float: right }
.award4 { float: right }
#navitile{width:820px; margin-left:0px; height:22px; background-repeat:repeat-x; position:absolute; color: #F2FFE4; left:0px; top: 0px; font-family:arial,verdana,helvetica; font-size:8px; white-space:nowrap; }
#navtile a{ color: #F2FFE4 }
#navitoolbarcontainer{width:100%; min-width:830px; width:100%; height:22px; position:absolute; top: 100px; left:0px; font-family:arial,verdana,helvetica; font-size:8px; background-image:url('background_end_fixed.png'); background-repeat:repeat-x; white-space:nowrap; margin:0px; padding:0px; z-index:1000}
#navitoolbarcontainer a{color: #F2FFE4}
#content {margin: 0px; padding: 0px; width:100%; min-width:830px; width:expression('100%'); position: absolute; left: 0px; top: 122px; font-family: arial, verdana, helvetica; font-size: 8px; white-space: nowrap; z-index: 1}
#slideshow {
margin: 0 auto;
position: relative;
top: 30px;
height: 480px;
width: 600px;
}
#heightcontainer{position:relative; height:17px; width:99%; background:transparent;}
#globalform{padding:0px; margin:0px}
#lightgrey{text-align:left; color: #F2FFE4; text-indent:5px; background-image:url('background_end_fixed.png')}
#lightgrey .inputglobal{font-size:9px; font-size:expression('8px'); text-align:left; margin-top:0px; margin-left:2px; background-repeat:no-repeat}
#lightgrey .inputglobal:hover{font-size:9px; text-align:left; margin-top:0px; background-color:#ccc}
#lightgrey a{font-family:sans-serif; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; top:1px; top:expression('-2px'); position:relative}
#lightgrey a:link{text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px}
#lightgrey a:visited{display:inline; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}
#lightgrey a:active{display:inline; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}
#lightgrey a:hover{display:inline; text-decoration:none; color:#fcf2ca; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}
A lot of this css is for the menus that i found on a site and have highly modifed, but I've used class/id's for most of everything so it should be easy to see what is what. Thanks for any help that you all can provide. This site has been a godsend for getting help. Hi, Ive spent hours upon hours painfully sculpting this website and i can't for the love of gaaawd get the positioning of my element standard throughout the website. The home page and the watercolour-classes page have the bottom graphics bar in the same position But different from all the other pages. All i want it to do is be the same throughout and its only out by about 10px. why oh why Ive been struggling for days and weeks with this problem and cant work it out. Im sure its something simple but as a self taught web designer i dont know it all.... far from it. Any ideas or suggestions Please. The website is http://www.miriartist.co.uk Any help or light on the matter would be great THANKS Cheeeers Ben So I just decided to redesign my website, and I learned the wonders of "position: absolute" and the left, right, top, and bottom CSS tags. But of course, with that comes some issues (and other things, like me having to think about people with different browsers/resolution settings than me). Some of my problems are as follows (captions of the problem are under the images) When the text overflows here, it just leaves the <div> tag... well... multiple <div> tags. This one takes the body <div> with it.. but doesn't let the bottom page image extend down. Top filler image doesn't extend all the way, body <div> doesn't connect properly to fade images. So as you can see, my big problem is the overflow, which really needs to be fixed. Don't know what the problem is with Opera there, but it's something else that should be checked out. So anyway, here's my code for the website. If you have any ideas for how to improve it/make it work better, then I'm happy with that. Don't worry about validation right now, though. I'm saving that for later. HTML Code: <html>
<head>
<title>Home - Alex Crooks Webdesign</title>
<style type="text/css">
body
{
margin: 0px;
background-color: #035b07;
font-size: 10pt;
color: white;
font-family: verdana, arial, sans-serif;
}
a
{
text-decoration: none;
color: white;
}
a:hover
{
text-decoration: underline;
color: white;
}
img
{
border: 0px;
}
.navlink
{
font-size: 16pt;
font-variant: small-caps;
font-weight: bold;
}
#navlinks
{
text-align: right;
vertical-align: middle;
padding: 5px 10px 0px 10px;
}
#topleft
{
position: absolute;
top: 0px;
left: 0px;
float: left;
width: 141px;
height: 228px;
background-image: url(topleft.gif);
z-index: -11;
}
#topfiller
{
position: absolute;
top: 0px;
width: 100%;
height: 155px;
background-image: url(topfiller.gif);
z-index: -12;
}
#left
{
float: left;
position: absolute;
left: 0px;
width: 65px;
height: 100%;
background-image: url(leftfiller.gif);
z-index: -13;
}
#bottomleft
{
position: absolute;
bottom: 0px;
left: 0px;
float: left;
width: 137px;
height: 134px;
background-image: url(bottomleft.gif);
z-index: -11;
}
#bottomfiller
{
position: absolute;
bottom: 0px;
width: 100%;
height: 67px;
background-image: url(bottomfiller.gif);
z-index: -12;
}
#nav
{
margin: 100px 0px 0px 65px;
margin-top: 100px;
height: 40px;
width: auto;
background-image: url(navbg.gif);
color: white;
}
.sep
{
vertical-align: middle;
width: 2px;
height: 25px;
padding: 0px 5px 0px 5px;
}
#bodyright
{
position: absolute;
top: 273px;
right: 200px;
bottom: 104px;
height: auto;
width: 22px;
background-image: url(bodyright.gif);
z-index: -7;
}
#body
{
padding: 5px 5px 5px 5px;
position: absolute;
top: 273px;
right: 221px;
bottom: 104px;
left: 200px;
width: auto;
height: auto;
background-color: white;
color: black;
z-index: 0;
}
#bodybottom
{
float: left;
position: absolute;
left: 246px;
right: 221px;
bottom: 87px;
left: 200px;
width: auto;
height: 17px;
background-image: url(bodybottom.gif);
z-index: -7;
}
#bodycornerleft
{
position: absolute;
bottom: 87px;
left: 200px;
width: 46px;
height: 18px;
background-image: url(bodycorner1.gif);
z-index: -6;
}
#bodycornerright
{
position: absolute;
right: 205px;
bottom: 87px;
width: 17px;
height: 17px;
background-image: url(bodycorner2.gif);
z-index: -7;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="top">
<a href="index2.html"><img style="padding: 5px 0px 0px 5px;" src="crookslogo.png" /></a>
<div id="topleft"></div>
<div id="topfiller"></div>
</div>
<div id="nav">
<div id="navlinks">
<a class="navlink" href="">Home</a> <img class="sep" src="navseparate.gif" />
<a class="navlink" href="">Features</a> <img class="sep" src="navseparate.gif" />
<a class="navlink" href="">Blog</a> <img class="sep" src="navseparate.gif" />
<a class="navlink" href="">Clients</a> <img class="sep" src="navseparate.gif" />
<a class="navlink" href="">Products</a>
</div>
</div>
<div id="content">
<div id="body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac enim sapien, vel tristique sapien. Vivamus erat purus, feugiat non porttitor id, cursus at sapien. Curabitur eleifend, leo facilisis consequat faucibus, ante eros bibendum tellus, et dictum nibh mi laoreet turpis. Proin pellentesque, nulla et ornare pretium, ipsum lectus faucibus mi, sed dictum purus ipsum a ante. Aenean nibh odio, porttitor a volutpat ut, euismod vitae nisi. Integer urna turpis, ultrices ullamcorper porttitor in, placerat ut metus. Sed venenatis nisl in elit faucibus non consectetur quam commodo. Pellentesque ut augue massa, ac iaculis elit. Integer eu quam nisi, non faucibus neque. Donec sit amet magna at nulla commodo cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tellus mauris, congue ut lobortis nec, adipiscing eu arcu. Suspendisse congue consectetur ante at porttitor. Maecenas sapien nibh, porttitor non pellentesque sed, sodales eu dui.
</p>
<p>
Nullam sodales malesuada lorem, et cursus velit malesuada nec. Phasellus vestibulum elit quis nunc semper vel accumsan dui lobortis. Nunc viverra tortor tincidunt dolor congue quis porta tortor auctor. Sed porta neque ac libero tristique varius. Nam id nisi lectus. Integer consectetur magna id erat volutpat adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer risus sem, interdum sed eleifend at, tincidunt in odio. Vestibulum euismod mauris eget magna semper sit amet feugiat risus varius. Mauris non neque et arcu ultricies venenatis a non mauris. Nulla facilisi. Donec sem turpis, porttitor et posuere id, posuere eget diam. Vestibulum et aliquam nibh. Phasellus quis ligula mauris, non porttitor sapien. Duis eu est id elit blandit vestibulum quis non urna. Maecenas enim augue, cursus faucibus tincidunt eget, cursus sed sem. Curabitur dictum dolor id massa bibendum vel tincidunt nunc volutpat. Nunc lobortis augue vitae ante porta eget mattis nisl faucibus. Ut sodales lorem vel dolor malesuada bibendum. Maecenas eget neque in elit semper rhoncus.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec aliquet semper volutpat. Suspendisse vitae sapien pulvinar mi egestas ornare quis nec sapien. Pellentesque nec ipsum ligula, sed ultricies lectus. Duis eu ipsum et dui vehicula luctus. Sed mollis rutrum dui elementum consectetur. Nunc viverra tortor quis tellus semper a imperdiet nisl suscipit. Nullam et dolor at purus dignissim faucibus eu vitae quam. Proin lacus ante, tempus ut ullamcorper id, mattis vitae eros. Vivamus mauris lorem, interdum at ultrices in, ultrices non metus. Phasellus convallis lobortis sem, sit amet convallis ante dignissim in. Nullam id mollis nibh. Pellentesque lobortis convallis erat, suscipit lobortis velit euismod ultricies.
</p>
<p>
Cras mollis imperdiet dignissim. Nulla sit amet elementum dolor. Curabitur luctus vestibulum sodales. Quisque eu odio velit, et pretium diam. Maecenas porttitor metus et mauris mattis sit amet facilisis odio sagittis. Aenean at turpis ac sapien ultrices pellentesque vel id erat. In ultrices pharetra erat, pulvinar molestie nisi hendrerit id. Mauris nunc eros, consequat in ultrices sed, malesuada non magna. Etiam dictum ultricies blandit. Vestibulum augue ipsum, malesuada a ullamcorper vel, porta accumsan nunc. Quisque dapibus posuere neque, sit amet lacinia justo tempus nec. Curabitur sit amet tortor nulla. Sed enim quam, facilisis eu dapibus quis, vestibulum at erat. Cras placerat sagittis eros, ac faucibus tellus ultricies vitae.
</p>
<p>
Aenean commodo enim facilisis tellus lacinia sit amet vulputate est condimentum. Vivamus viverra vehicula felis sed rhoncus. Donec sed imperdiet est. Proin molestie velit nec urna lacinia vel fermentum sem tincidunt. Maecenas rutrum sollicitudin varius. Donec et ligula semper eros euismod interdum. Aenean ultricies magna sed nisl consectetur venenatis. Nullam quis orci sapien. Curabitur pellentesque lacinia ante, id pharetra risus sagittis id. Etiam metus turpis, rutrum vel faucibus nec, feugiat rutrum nibh. Donec fringilla sagittis ligula, nec varius felis dapibus eu. Curabitur felis quam, fermentum non eleifend ac, faucibus vel libero. In nec leo ut nulla sagittis scelerisque nec in orci.
</p>
</div>
<div id="bodyright"></div>
<div id="bodycornerleft"></div>
<div id="bodybottom"></div>
<div id="bodycornerright"></div>
</div>
<div id="bottom">
<div id="bottomleft"></div>
<div id="bottomfiller"></div>
</div>
</body>
</html>
Comparing IE7 to Firefox... the TEXT sitting on the image looks fine in IE 7 but is slightly "bumped up" in Firefox and most other browsers. Does anyone know the explanation for this?... Thank you. I have this menu to rollover... and I cant seem to get the positioning correct. All I want to do is shift it to the right about 100px so that it doesnt cover up the rest of the menu items. I will paste the CSS, javascript, and html code here... I have tried positioning it via CSS and thats not working :/ Is there a way to do it in the java code? Or if you want you can say how you would do it in CSS... maybe I just was doing it wrong. CSS Code: #dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}
#dropmenudiv a:hover{
color:#000000;
background-color: #cc0000;
}
JAVA Code: <script type="text/javascript">
var menu1=new Array()
menu1[0]='<a href="group.html">About (group)</a>'
menu1[1]='<a href="officers.html">Current Officers</a>'
menu1[2]='<a href="officerjoin.html">Become an Officer</a>'
var menu2=new Array()
menu2[0]='<a href="meetings.html">Meetings</a>'
menu2[1]='<a href="alumniday.html">Alumni Day</a>'
menu2[2]='<a href="industryday.html">Industry Day</a>'
var menuwidth='165px'
var menubgcolor='lightyellow'
var disappeardelay=50
var hidemenu_onclick="yes"
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
return clickreturnvalue()
}
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
if (hidemenu_onclick=="yes")
document.onclick=hidemenu
</script>
HTML Code: <li><a href="events.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">Events</a> </li> Any help would be appreciated! Thanks! Never mind you guys were wrong as usual. Thanks. The problematic page has this url: http://geosci.uchicago.edu/~moyer/Mo...GroupPage.html It shows up in firefox the way I want it to. The pictures enlarge right on top of their thumbnail accompaniments. The enlarged images are absolutely positioned. However, in chrome, internet explorer and safari, they enlarge several hundred pixels left of where I want them to. Is there a way I can have the enlarged images positioned relative to the thumbnails? Or can I add a margin to the code that only firefox will recognize? I can send you the code if you need it to figure out the problem. It is just long and confusing, because I was modifying somebody else's code and I am a newbie. Funny thing with our website, which is victorylifecenter.org In firefox on the right hand side we have two images, one is upcoming events and the other is a email login. both show up in firefox In IE neither or there, they just do not show up? Any ideas? thanks Hi, I am a newbie, and I am desgining a website. I am using tables in Dreamweaver (I know this may not be the right choice, but its the only way I know), and inside the cells I'm placing .swf buttons. When I preview in Safari, Chrome, and Opera it looks like it should. However, when I preview in Firefox, the buttons are too spaced out vertically, as if the cells had increased their height (making the buttons very far apart from eachother). I understand Firefox is one of the best browsers, if not the best, so I assume it is me who is doing something wrong. I will email the code to anyone who needs it. Thank you in advance. Hello to all those whom (m-one, pegasus and coothead, and others) helped rkgrkg with her webpages: I took a look at them and then went to the website she went to to get the script for her tabz thanks to m-one, I intergrated it using their format, plus added other scripts, "thanks coothead (for his x/y script)" to dassel it up using her color themes. Now for the bad news , I have a older computer (not being wealthy ), so I only have IE6 and Firefox 2.0. When I dasseled the webpages I used IE6 to display it as I created. It looks kwel and beautiful in IE6, but when I tried to display it in Firefox 2.0 it became all unbounded. I used the error counsel on Firefox 2.0 to see any errors that maybe causing problems, the only thing displayed there was my scroll-bar style entries sayed it "dropped" them lol. I tried messing with the css files, but when I did some parts came together in Firefox but then came undone in IE6, Fustrated, I put everything back as it was. and said, "The Heck with Firefox" even though I knew rkgrkg Uses it. I have uploaded these 2 beautiful pages and the content heref. Can someone who is more talented and smarter then I, please, take a look at my finished/fustrated work so you can see it in Firefox as well as IE, and please help so I don't feel useless (*feel like I waisted my time trying to help*) and stupid. Thank You Very Much in Advance! It seems that when opening my page in firefox my navigation bar is all over the place and my transparencies don't seem to be working either. Any help? Thanks. Here's the link http://www.foswebsolutions.com ...and the css http://www.foswebsolutions.com/style.css I did some searching, but have not found the exact probelm here, so I am starting new: I created a site using CSS/HTML for my layout (using Dreamweaver). Whenever I view it using IE7, it looks great and everything works. When I open it in Firefox, once again it looks good, except for the bottom of the divisions right above my footer, there is a 20px offset and blank space on the 2 side divisions, but not the center one. Lastly, when you view this in IE6 or IE5.5, the middle division is pushed down past the 2 side divisions so you see blank space between those and scroll down to see the middle division. It is only in the building stages and some links are not completed yet, and the main site is: http://dana.sportslineceramics.com I piggy-backed it off my own website so I can view it live and work on it. I have tried everything I can think of to get it to display right, and it just does not. I want to use an <iframe> in the middle division so that all links open on that same page instead of having 17 different pages. Thanks in advance for any suggestions! Having problems with my logo on ie and firefox. It opens fine in safari. Site is www.justintimemelodies.com. I am new to html and am not sure what the problem is. I assume i need to add something for the coding to show in those two browsers. the following is the code:<div id="Logo"> <a href="index.html"><img src="./images/JustInTime2.jpg"alt="Home" border="0"></img></a></div> <a href="index.html"></a> Hi! My site finally seems to work fine in IE, but now that I'm checking it with Firefox, it turns out to have many problems. I fixed most of them, but the one that's bugging me is that the main text is lower than it should be. Here are the html and css: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
function popup(mylink, annonces)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, annonces, 'width=600,height=600,scrollbars=yes');
return false;
}
//
</SCRIPT>
<TITLE>Duo: balalaika et piano -- Dmitri Nassyrov et Victoria Khramova</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; Charset=Windows-1251">
<META NAME="GENERATOR" CONTENT="Microsoft FrontPage 5.0">
<META NAME="Author" CONTENT="Dmitri Nassyrov">
<META NAME="KeyWords" CONTENT="balalaika, Victoria, Khramova, Dmitri, Nassyrov,
concerts, piano, duo, stringsandkeys, douce, soiree, histoire, du, balalaika">
<META NAME="Description" CONTENT="Le duo du balalaïka et du piano: Dmitri
Nassyrov et Victoria Khramova, ont un repertoire tres varié: folklorique,
classique, jazz, et autres... ">
<TITLE>Duo:balalaïka et piano - Dmitri Nassyrov et Victoria Khramova</TITLE>
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>
<div id="container">
<BODY BGCOLOR=beige TEXT="#000000" LINK="#0000FF" VLINK="#7F007F" ALINK="#FF0000"
BACKGROUND="../site/img/bcknd.jpg">
<script language="javascript">
var u=13200;
var vsbl=0;
var l='';
</script>
<script type="text/javascript" language=Javascript
src="http://h1.hitslog.com/counter.js"></script>
<script language="javascript">
document.write('<a href=http://hitslog.com/><img border=0 width=1 height=1
src=http://h1.hitslog.com/hl.php?'+l+'></a>');
</script>
<noscript>
<a href="http://hitslog.com/"><img border=0 width=1 height=1
src="http://h1.hitslog.com/hl.php?u=13200" alt="MySpace tracker"></a></noscript>
<TABLE id="main">
<tR width=720 height=160>
<td valign=top width=615 height=160><IMG width=615 height=160 alt="Duo:
balalaïka et piano - Dmitri Nassyrov et Victoria Khramova" SRC="HEADER.gif">
</td>
<td>
<table valign=center width=105 height=75 cellpadding=0>
<tr class="lang">
<td class="lang">
<img alt="En Français" border=0
src="../site/img/francaisclik.gif" >
</td>
</tr>
<tr class="lang">
<td class="lang">
<a href="../eng/index.html"><img alt="In English"
onmouseover="this.src='../site/img/englishon.gif'"
onmouseout="this.src='../site/img/english.gif'"
onclick="this.src='../site/img/englishclik.gif'" border=0
src="../site/img/english.gif"></a>
</td>
</tr>
<tr class="lang">
<td class="lang">
<a href="../rus/index.html"><img alt="По-Русски"
onmouseover="this.src='../site/img/russianon.gif'"
onmouseout="this.src='../site/img/russian.gif'"
onclick="this.src='../site/img/russianclik.gif'" border=0
src="../site/img/russian.gif"></a>
</td>
</tr>
<tr width=105 height=85>
<td width=105 height=85 align=center>
<img alt="Duo: balalaïka et piano - Dmitri Nassyrov et
Victoria Khramova" src="sideheader.gif">
</td>
</tr>
</table>
</td>
</tR>
<TR>
<td colspan=2>
<table width=720>
<tr>
<td valign=top>
<TABLE valign=top>
<TR>
<TD class="menu"><A HREF="INDEX.HTML"><img src="bienvenueclik.gif"
alt="Bienvenue" border="0"></a></TD>
</TR>
<TR>
<TD class="menu"><A HREF="DUO.HTML"><img src="../img/leduo.gif" alt="Notre
duo" onmouseover="this.src='../img/leduoon.gif'"
onmouseout="this.src='../img/leduo.gif'" onclick="this.src='../img/leduoclik.gif'"
border="0"></A></TD>
</TR>
<TR>
<TD class="menu"><A HREF="concerts.HTML"><img src="../img/concerts.gif"
alt="Nos concerts" onmouseover="this.src='../img/concertson.gif'"
onmouseout="this.src='../img/concerts.gif'"
onclick="this.src='../img/concertsclik.gif'" border="0"></A></TD>
</TR>
<TR>
<TD class="menu"><A HREF="audio.HTML"><img src="../img/audio.gif" alt="Notre
musique" onmouseover="this.src='../img/audioon.gif'"
onmouseout="this.src='../img/audio.gif'"
onclick="this.src='../img/audioclik.gif'"border="0"></A></TD>
</TR>
<TR>
<TD class="menu"><A HREF="historique.HTML"><img src="../img/historique.gif"
alt="L'Histoire du balalaïka" onmouseover="this.src='../img/historiqueon.gif'"
onmouseout="this.src='../img/historique.gif'"
onclick="this.src='../img/historiqueclik.gif'" border="0"></A></TD>
</TR>
<TR>
<TD class="menu"><A HREF="liens.HTML"><img src="../img/liens.gif" alt="Liens"
onmouseover="this.src='../img/lienson.gif'" onmouseout="this.src='../img/liens.gif'"
onclick="this.src='../img/liensclik.gif'" border="0"></A></TD>
</TR>
<TR>
<TD class="menu"><A HREF="contact.HTML"><img src="../img/contact.gif"
alt="Comment nous rejoindre" onmouseover="this.src='../img/contacton.gif'"
onmouseout="this.src='../img/contact.gif'" onclick="this.src='../img/contactclik.gif'"
border="0"></A></TD>
</TR>
</TABLE>
</tD>
<TD VALIGN=top>
<table height=100% width=500 class="text" cellpadding=20>
<tr>
<td>
<!--<marquee id="test" onMouseOver="document.all.test.stop()"
onMouseOut="document.all.test.start()" scrollamount="2" scrolldelay="20" width="100%"
height="51" behavior="scroll" direction="left"><font face="arial"
align=middle><i>
<A HREF="annonces3.html"
onClick="return popup(this, 'annonces',true)"><b>17 novembre - 20:00</b></A><br>
Festival "From Russia With Love"<br>
à la bibliothèque publique juive.
</i></font></marquee>-->
</td>
</tr>
<tr>
<td valign=top><font face="times new roman" size=3><h2>Un duo, c'est
indivisible...</h2>
<p align=justify>Dans un duo, le rôle de chaque musicien n'est pas seulement de
compléter son partenaire, mais aussi de souligner la sonorité de son
instrument.</p>
<p align=justify>Notre duo est assez particulier et assez unique à
Montréal. Les deux instruments composant notre duo sont: le piano et le
balalaïka - instrument folklorique russe. Les possibilitées de cette union
sont surprenantes, dans le répertoi folklore, classique, jazz...</p>
<hr width=95%></hr>
<p>Sur ce site, vous trouverez de l'information sur nos <A
HREF="concerts.HTML">concerts</A>, vous pourrez écouter nos <A
HREF="audio.HTML">enregistrements</A>, lire nos <A HREF="DUO.HTML">biographies</A>, et
plus encore.</p>
<p>Et, bien sûr, nous serons heureux de vous voir à nos concerts!</P>
<p><i>Dmitri Nassyrov et Victoria Khramova</i></p>
</TD>
</tr>
</table>
</td>
</tr>
</table>
</td>
</TR>
</TABLE>
<font face="arial" size=1
align=right> &nb
sp;
&nb
sp;
&nb
sp; Dmitri Nassyrov et Victoria Khramova © Tous droits
réservés.</font>
</BODY>
</div>
</HTML>
HTML Code: body {
text-align: center;
background-color: rgb(239,197,137);
background-attachment: scroll;
background-position: center;
background-image: url("bkg.jpg");
background-repeat: repeat-y;
}
#container {
margin: 0 auto;
text-align: left;
position:relative;
width:720px;
}
div.text
{
background-image: url("../site/img/textbcknd.jpg");
}
#main {
border:0px; /* border="0" */
border-collapse:collapse; /* cellspacing="0" */
}
#top {
border:0px; /* border="0" */
border-collapse:collapse; /* cellspacing="0" */
}
tr.lang {
horizontal-align:left;
width:100px;
height:25px;
}
td.lang {
horizontal-align:left;
width:100px;
height:25px;
}
td.menu {
width:220;
height:40;
}
table {
border-collapse:collapse;
}
table.text {
padding:20px;
background-image: url("../site/img/textbcknd.jpg");
}
Any help is appreciated. Thank you very much! Greetings, everyone! I'm glad to have found this site! I've been building a website - I'm pretty limited to just HTML knowledge and a little CSS - and everything is going along okay, except I'm stumped on this one issue. I got tired of everything looking so 'boxy', since I use a lot of Tables to create my site, so I learned how to add rounded corners to my tables, which helps a lot. However, what looks good in my Firefox browser (the one I normally use) does not look right in Internet Explorer. Basically, on the right side of the main table, where I placed a graphic of a rounded edge, I'm still getting a weird white border line, even though I've set all my borders to zero. I was wondering if someone could take a look at my page and tell me where I'm messing up. Here's a direct link to the page in question.... http://www.kitwoo.com/kitwoo_seo.html If you look at it in Firefox, it looks fine, but in IE (I think I'm using the latest version of both browsers) you can see that little white line on the right side of the table. Thanks in advance for any suggestions! |
|||||||