www.webdeveloper.com
Results 1 to 3 of 3

Thread: Problems with IE

  1. #1
    Join Date
    Jul 2009
    Posts
    2

    Problems with IE

    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.

    http://stephanieb.t35.com/

    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.

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    Validate, 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 semantic HTML.

  3. #3
    Join Date
    Jul 2009
    Posts
    2
    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>
    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;
    }
    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();

    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;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles