Problems with IE

@DeLoreanJul 02.2009

I am very new to web programming. I have just recently acquired a basic knowledge of css/js/php. A friend of mine mentioned she’d like a web page for her modeling career, so I told her I’d mess around with it since I need the experience and wanted something to practice on. The basic issues are: the pictures I have positioned are different in IE than they are in Firefox. Also, the buttons I created with a website that generates JS buttons for you disappear on mouse-over in IE (changing into the red X), and also disappears in Firefox: so I guess the main problem is the positioning. This code is not private whatsoever, so I am more than happy to post anything you request to help answer my questions (no one would want to use my code!!!). Thanks in advance!

Here is the URL on the POS free hosting site I’ve been using.

~~[url]~~http://stephanieb.t35.com/[/url]

Also: I am very new, so please point out any other problems that may be due to my lack of experience so I can get better.

to post a comment

CSS

2 Comments(s) _↴

@Declan1991Jul 02.2009 — #[url=http://validator.w3.org/check?uri=http%3A%2F%2Fstephanieb.t35.com%2F&charset=(detect+automatically)&doctype=Inline&group=0]Validate[/url], though you don't seem to have too many issues in that regard.

Look into semantic HTML. For example, your links across the top should be a ul, with each li set to 25% width. Remember as well, try to force things as little as possible. Start off with a div, check and see if it is right in the browsers you're testing in. Add things gradually and errors will be more obvious.

When you're starting, it might be a good idea to look into Eric Meyer's Reset CSS. It gives you a much better level playing pitch to start with, as you become more used to positioning, you'll need it less and less.

I haven't said much about your actual problems, because I think you'll learn more from starting again, testing as you go along, and trying as much as you can (and you are, at the moment), to use [url=http://www.thefutureoftheweb.com/blog/writing-semantic-html]semantic HTML[/url].

@DeLoreanauthorJul 02.2009 — #Thanks, that article is quite helpful. And yes, I made sure my CSS and HTML validated before posting. I'm going to post some code so that hopefully I can get help solving these problems.

index.html

[CODE]<html>
 
 <title>SonyB</title>
 
 <head>
 
  <title>SonyB</title>
 
  <link rel="stylesheet" type="text/css" href="index.css" />
  <link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />
  <script src="menuscript.js" language="javascript" type="text/javascript"></script>
 </head>
 
 <body style="margin: 0; padding: 0;">
 
  <img src="img/silversun.jpg" id="silversun" />
 
  <style>
   FONT	{FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 12px}
   TD	{FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 12px}
   BODY	{FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 12px}
   P	{FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 12px}
   DIV	{FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 12px}
  </style>
 
  <a href="Home" class="mainmenu" id="home" onmouseover="setOverImg('1','');overSub=true;showSubMenu('submenu1','button1');" onmouseout="setOutImg('1','');overSub=false;setTimeout('hideSubMenu('submenu1')',delay);" target=""><img src="img/buttons/button1up.png" border="0" id="button1" vspace="1" hspace="1"></a><br>
  <a href="Pictures" class="mainmenu" id="pictures" onmouseover="setOverImg('2','');overSub=true;showSubMenu('submenu2','button2');" onmouseout="setOutImg('2','');overSub=false;setTimeout('hideSubMenu('submenu2')',delay);" target=""><img src="img/buttons/button2up.png" border="0" id="button2" vspace="1" hspace="1"></a><br>
  <a href="Fashion Shows" class="mainmenu" id="fashionshows" onmouseover="setOverImg('3','');overSub=true;showSubMenu('submenu3','button3');" onmouseout="setOutImg('3','');overSub=false;setTimeout('hideSubMenu('submenu3')',delay);" target=""><img src="img/buttons/button3up.png" border="0" id="button3" vspace="1" hspace="1"></a><br>
  <a href="Social Networking" class="mainmenu" id="socialnetworking" onmouseover="setOverImg('4','');overSub=true;showSubMenu('submenu4','button4');" onmouseout="setOutImg('4','');overSub=false;setTimeout('hideSubMenu('submenu4')',delay);" target=""><img src="img/buttons/button4up.png" border="0" id="button4" vspace="1" hspace="1"></a><br>
 
 
 
  <div id="footerimages">
   <img src="img/7.jpg" class="footerimages" id="mainpicture01" />
   <img src="img/DSC04440.jpg" class="footerimages" id="mainpicture02" />
   <img src="img/49fdc210d8406.jpg" class="footerimages" id="mainpicture03" />
   <img src="img/2(1)1.jpg" class="footerimages" id="mainpicture04" />
   <img src="img/2.jpg" class="footerimages" id="mainpicture05" />
   <img src="img/DSC_00041.jpg" class="footerimages" id="mainpicture06" />
   <img src="img/DSC04520.jpg" class="footerimages" id="mainpicture07" />
   <img src="img/IMG_1108ee41.jpg" class="footerimages" id="mainpicture08" />
   <img src="img/l_4a423825143a4964a4641092c1b95688.jpg" class="footerimages" id="mainpicture09" />
   <img src="img/l_2667abd536ca4454b018bb8d04dd94c8.jpg" class="footerimages" id="mainpicture10" />
  </div>
 
 </body>
 
 </html>[/CODE]

index.css

[CODE]/* anchors */
 
 a.mainmenu {
 position: absolute;
 top: 43px;
 z-index: 10;
 }
 
 a#home {
 left: 108px;
 }
 
 a#pictures {
 left: 308px;
 }
 
 a#fashionshows {
 left: 508px;
 }
 
 a#socialnetworking {
 left: 708px;
 }
 
 a:hover {
 text-decoration: underline;
 color: #000000;
 }
 
 /* divs */
 
 /* images */
 
 img.footerimages {
 position: absolute;
 bottom: 36px;
 height: 11%;
 width: 7%;
 opacity: 0.1;
 /* filter: alpha(opacity = 10); */
 }
 
 img#silversun {
 position: relative;
 top: 35px;
 display: block;
 margin-right: auto;
 margin-left: auto;
 width: 80%;
 height: 89%;
 opacity: 0.8;
 /* filter: alpha(opacity = 80); */
 -moz-border-radius: 129px;
 }
 
 img#mainpicture01 {
 left: 135px;
 }
 
 img#mainpicture02 {
 left: 213px;
 }
 
 img#mainpicture03 {
 left: 288px;
 }
 
 img#mainpicture04 {
 left: 363px;
 }
 
 img#mainpicture05 {
 left: 438px;
 }
 
 img#mainpicture06 {
 left: 513px;
 }
 
 img#mainpicture07 {
 left: 588px;
 }
 
 img#mainpicture08 {
 left: 663px;
 }
 
 img#mainpicture09 {
 left: 738px;
 }
 
 img#mainpicture10 {
 left: 813px;
 }
 
 img:hover {
 opacity: 1;
 }[/CODE]

menuscipt.js

[CODE]
 /*** SET BUTTON'S FOLDER HERE ***/
 var buttonFolder = "img/buttons/";
 
 /*** SET BUTTONS' FILENAMES HERE ***/
 upSources = new Array("button1up.png","button2up.png","button3up.png","button4up.png");
 
 overSources = new Array("button1over.png","button2over.png","button3over.png","button4over.png");
 
 // SUB MENUS DECLARATION, YOU DONT NEED TO EDIT THIS
 subInfo = new Array();
 subInfo[1] = new Array();
 subInfo[2] = new Array();
 subInfo[3] = new Array();
 subInfo[4] = new Array();
 
 
 //*** SET SUB MENUS TEXT LINKS AND TARGETS HERE ***//
 
 subInfo[2][1] = new Array("Random","Sub-Link 1","");
 subInfo[2][2] = new Array("Family","Sub-Link 2","");
 
 subInfo[3][1] = new Array("Georgia","Sub-Link 1","");
 subInfo[3][2] = new Array("Florida","Sub-Link 2","");
 
 subInfo[4][1] = new Array("Facebook","Sub-Link 1","");
 subInfo[4][2] = new Array("Myspace","Sub-Link 2","");
 subInfo[4][3] = new Array("Instant Messaging","Sub-Link 3","");
 
 
 //*** SET SUB MENU POSITION ( RELATIVE TO BUTTON ) ***//
 var xSubOffset = 5;
 var ySubOffset = 21;
 
 
 
 //*** NO MORE SETTINGS BEYOND THIS POINT ***//
 var overSub = false;
 var delay = 1000;
 totalButtons = upSources.length;
 
 // GENERATE SUB MENUS
 for ( x=0; x<totalButtons; x++) {
 // SET EMPTY DIV FOR BUTTONS WITHOUT SUBMENU
 if ( subInfo[x+1].length < 1 ) { 
 document.write('<div id="submenu' + (x+1) + '">');
 // SET DIV FOR BUTTONS WITH SUBMENU
 } else {
 document.write('<div id="submenu' + (x+1) + '" class="dropmenu" ');
 document.write('onMouseOver="overSub=true;');
 document.write('setOverImg('' + (x+1) + '','');"');
 document.write('onMouseOut="overSub=false;');
 document.write('setTimeout('hideSubMenu(\'submenu' + (x+1) + '\')',delay);');
 document.write('setOutImg('' + (x+1) + '','');">');
 
 
   document.write('<ul>');
   for ( k=0; k<subInfo[x+1].length-1; k++ ) {
   document.write('<li>');
   document.write('<a href="' + subInfo[x+1][k+1][1] + '" ');
   document.write('target="' + subInfo[x+1][k+1][2] + '">');
   document.write( subInfo[x+1][k+1][0] + '</a>');
   document.write('</li>');
   }
   document.write('</ul>');
  }
  document.write('</div>');
 }
 
 
 
 
 
 //*** MAIN BUTTONS FUNCTIONS ***//
 // PRELOAD MAIN MENU BUTTON IMAGES
 function preload() {
 for ( x=0; x<totalButtons; x++ ) {
 buttonUp = new Image();
 buttonUp.src = buttonFolder + upSources[x];
 buttonOver = new Image();
 buttonOver.src = buttonFolder + overSources[x];
 }
 }
 
 // SET MOUSEOVER BUTTON
 function setOverImg(But, ID) {
 document.getElementById('button' + But + ID).src = buttonFolder + overSources[But-1];
 }
 
 // SET MOUSEOUT BUTTON
 function setOutImg(But, ID) {
 document.getElementById('button' + But + ID).src = buttonFolder + upSources[But-1];
 }
 
 
 
 //*** SUB MENU FUNCTIONS ***//
 // GET ELEMENT ID MULTI BROWSER
 function getElement(id) {
 return document.getElementById ? document.getElementById(id) : document.all ? document.all(id) : null; 
 }
 
 // GET X COORDINATE
 function getRealLeft(id) { 
 var el = getElement(id);
 if (el) { 
 xPos = el.offsetLeft;
 tempEl = el.offsetParent;
 while (tempEl != null) {
 xPos += tempEl.offsetLeft;
 tempEl = tempEl.offsetParent;
 } 
 return xPos;
 } 
 } 
 
 // GET Y COORDINATE
 function getRealTop(id) {
 var el = getElement(id);
 if (el) { 
 yPos = el.offsetTop;
 tempEl = el.offsetParent;
 while (tempEl != null) {
 yPos += tempEl.offsetTop;
 tempEl = tempEl.offsetParent;
 }
 return yPos;
 }
 }
 
 // MOVE OBJECT TO COORDINATE
 function moveObjectTo(objectID,x,y) {
 var el = getElement(objectID);
 el.style.left = x;
 el.style.top = y;
 }
 
 // MOVE SUBMENU TO CORRESPONDING BUTTON
 function showSubMenu(subID, buttonID) {
 hideAllSubMenus();
 butX = getRealLeft(buttonID);
 butY = getRealTop(buttonID);
 moveObjectTo(subID,butX+xSubOffset, butY+ySubOffset);
 }
 
 // HIDE ALL SUB MENUS
 function hideAllSubMenus() {
 for ( x=0; x<totalButtons; x++) {
 moveObjectTo("submenu" + (x+1) + "",-500, -500 );
 }
 }
 
 // HIDE ONE SUB MENU
 function hideSubMenu(subID) {
 if ( overSub == false ) {
 moveObjectTo(subID,-500, -500);
 }
 }
 
 
 
 //preload();[/CODE]

menuscript.css

[CODE].dropmenu {
 position: absolute;
 left: -1500px;
 visibility: visible;
 z-index: 101;
 float: left;
 width: 124px;
 
 border-width: 0px;
 border-style: solid;
 border-color: #000000; 
 background-color: #D4D4D4;
 }
 .dropmenu ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }
 .dropmenu li {
 display: inline;
 }
 .dropmenu a, .dropmenu a:visited, .dropmenu a:active {
 display: block;
 width: 120px;
 
 padding: 0px;
 margin: 2px;
 font-family: Sans-Serif;
 font-size: 11px;
 font-weight: normal;
 text-align: center;
 text-decoration: none;
 
 color: #FFFFFF;
 background-color: #175796;
 }
 .dropmenu a:hover {
 padding: 0px;
 margin: 2px;
 font-family: Sans-Serif;
 font-size: 11px;
 font-weight: normal;
 text-align: center;
 text-decoration: none;
 
 color: #FFFFFF;
 background-color: #408ECD;
 }
 [/CODE]

Also in #CSS _↴

Floating div ignoring its contents.repeating a background IE is killing my layout

Success!

Help @DeLorean spread the word by sharing this article on Twitter...

Tweet This

Problems with IE

2 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #CSS _↴