Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

css problems with IE (surprise surprise)

Options

Comments

  • Options
    #2
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    there is something you can start with:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/* andy.ie splash page - css document */
body{
	height: 100%;
	tex-align: left;
	background: white;
	margin: 0px auto;
	position: center;
	padding:0px;
	font: smaller Arial, Helvetica, sans-serif, ;
}


#header{
	height: 93px;
	width: 551px;
	background: url("http://www.andy.ie/andysource/images/header.jpg") no-repeat;
	background-position:left;
	text-align:left;
}




#andy{
	position: absolute;
	height: 76px;
	width: 97px;
	background: url("http://www.andy.ie/andysource/images/logo.gif") no-repeat;
	margin-top: 60px;
	margin-left: 53px;
}

#pattern{
	height: 500px;/*100%;*/
	width: 99px;
	background-image:url(http://www.andy.ie/andysource/images/pattern.gif);
	background-repeat:repeat-y;
	background-position:top -80px;
	text-align:left;

}


/* #######links ######## */

#links{
	position: absolute;
	height: 100%;
	width: 239px;
	margin-top: 130px;
	margin-left: 120px;
}

a#type img {
	height: 67px; 
	width: 239px; 
	background: url("http://www.andy.ie/andysource/images/type_n.jpg") center no-repeat;
}
a#type:hover img {
	height: 67px; 
	width: 239px; 
	background: url("http://www.andy.ie/andysource/images/type_o.jpg") center no-repeat;
}

a#peepshow img {
	height: 67px; 
	width: 239px; 
	background: url("http://www.andy.ie/andysource/images/peepshow_n.jpg") center no-repeat;
}
a#peepshow:hover img {
	height: 67px; 
	width: 239px; 
	background: url("http://www.andy.ie/andysource/images/peepshow_o.jpg") center no-repeat;
}

a#scrapbook img {
	height: 68px; 
	width: 239px; 
	background: url("http://www.andy.ie/andysource/images/scrapbook_n.jpg") center no-repeat;
}
a#scrapbook:hover img {
	height: 68px; 
	width: 239px; 
	background: url("http://www.andy.ie/andysource/images/scrapbook_o.jpg") center no-repeat;
}

a#forum img {
	height: 71px; 
	width: 239px; 
	background: url("http://www.andy.ie/andysource/images/forum_n.jpg") center no-repeat;
}
a#forum:hover img {
	height: 71px; 
	width: 239px; 
	background: url("http://www.andy.ie/andysource/images/forum_o.jpg") center no-repeat;
}

</style>
</head>

<body>
<div id="container" style="text-align:left; width:800px;">
	<div id="andy"><a id="logo" href="http://www.andy.ie/index.html"><img src="http://www.andy.ie/andysource/images/button.png" alt="splash page" width="97" height="76" border="0" /></a></div>
	<div id="links"> 
			<a id="type" href="http://andy.ie/type"><img src="http://www.andy.ie/andysource/images/button.png" alt="type" width="239" height="67" border="0"></a>
			<a id="peepshow" href="http://andy.ie/peepshow/peepshow.html"><img src="http://www.andy.ie/andysource/images/button.png" alt="peepshow" width="239" height="67" border="0"></a>
			<a id="scrapbook" href="http://andy.ie/scrapbook/scrapbook.html"><img src="http://www.andy.ie/andysource/images/button.png" alt="scrapbook" width="239" height="68" border="0"></a> 
			<a id="forum" href="http://andy.ie/forum/index.php"><img src="http://www.andy.ie/andysource/images/button.png" alt="forum" width="239" height="71" border="0"></a>
		</div>
	<div id="header"></div>
	<div id="pattern"></div>	
		
		
		
		<div id="rollover"> 
		<img src="http://www.andy.ie/andysource/images/type_o.jpg" alt="forum" width="0" height="0" border="0">
		<img src="http://www.andy.ie/andysource/images/peepshow_o.jpg" alt="peepshow" width="0" height="0" border="0"> 
		<img src="http://www.andy.ie/andysource/images/scrapbook_o.jpg" alt="scrapbook" width="0" height="0" border="0"> 
		<img src="http://www.andy.ie/andysource/images/forum_o.jpg" alt="forum" width="0" height="0" border="0">
		</div> 
</div> 
</body>
</html>


  • Options
    #3
    spidermonkey
    Registered Users Posts: 490 ✭✭spidermonkey


    that seems to work grand locally on the pc at home.

    if you dont mind me asking, what caused this? how did you fix it?
    i look through the code and it doesn't look like you changed much other than embedding the css into the webpage?

    thanks for the help!
    much appreciated!
    :)


  • Options
    #4
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    Have a closer look at the css. changed few things and removed some.
    Also the divs position has been changed on the page as well.

    That was just a quick review of the page (10min work over a cup of coffe).
    You need to separate the divs, also I added a container as well.


  • Options
    #5
    spidermonkey
    Registered Users Posts: 490 ✭✭spidermonkey


    cool ill look into that, got a few other pages that i need to make compatible too

    for future reference is there any reading material you would suggest that might cover cross browser compatibility?

    thanks for the help again, much appreciated!


  • Options
    #6
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    You should get the layout right, then make a template out of it for future use.

    It all comes down to experience and practise. It's not good enough to just read.
    try w3schools website.


  • Advertisement
Advertisement