Help! Assignment Deadline tomorrow! - Buttons and Images show in firefox but not IE

leonistic · 23-Jun-2008, 03:54 PM #1

HELP!! I'm supposed to be handing this in as an assignment for my school and the deadline's tomorrow, I've just realized that the images and buttons in the page is not showing in IE. Firefox is fine. However, my lecturers use only IE!! Could someone help me out with this? I've been trying out everything here but it's still not showing.

Could you also edit the box so that the text in it wont be overflowed due to excessive texts?

Thanks!!

Quote:

<html>
<title>LEONISTIC.ORG - About Me</title>
<head>
<style type="text/css">
a:link {text-decoration: none; color: #000000; font-weight:bold}
a:visited {text-decoration: none; color: #000000; font-weight:bold}
a:active {text-decoration: none; color: #000000; font-weight:bold}
a:hover {text-decoration: none; color: #000000; cursor: crosshair; font-weight:bold; height:0; filter:blur(add="0",direction="90",strength="9");}
body
{ background: white;
font-family: verdana;
color: #000000;
font-size: 8pt;
cursor: crosshair;}
}

textarea, input, select {
background: white;
cursor: crosshair;
font-family : verdana;
font-size: 8pt;
table font-size: 8pt;
color: #000000;
border-color: none;
border-style: none;
border-top-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
}

/*The following code is for buttons */
a.squarebutton{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-blue-right.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}

a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/
}

a.squarebutton span{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-blue-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}
</style>
</head>

<body>
<div class="buttonwrapper">
<div style="padding:''; position: absolute; top: 460; left: 565; z-index: 5; width: 400; height: 25; ">
<a class="squarebutton" href="index.html"><span>Home</span></a> <a class="squarebutton" href="aboutme.html" style="margin-left: 6px"><span>About Me</span></a>
<a class="squarebutton" href="portfolio.html" style="margin-left: 6px"><span>My Portfolio</span></a>
<a class="squarebutton" href="shoutbox.html" style="margin-left: 10px"><span>Shoutout!</span></a>
</div>
<br />

<center><br>
<div style="overflow:auto; position: absolute; left: 25; top: 100; padding: 2;">
<img src="http://i300.photobucket.com/albums/nn5/leonistic2/portfolio/background1b.jpg">
</div></div>

<div id="box" style="position:absolute; padding:5px; width: 485; height: 412; cursor: crosshair; z-index:2; left: 30; top: 105; overflow: auto; background-color: transparent">
<p align="left">
<center><b><u>About Me</b></u></center>
<br>
<br>

<tr>
content here blahblahblah
<br>
</p>
</div>

</body>
</html>

leonistic · 23-Jun-2008, 04:57 PM #2

anybody? sorry, this is v urgent!! few hours left =p

TheRobatron · 23-Jun-2008, 05:13 PM #3

Can you post screenshots for FireFox and IE?

leonistic · 23-Jun-2008, 05:17 PM #4

yay, thanks for the reply!
Attached are the screenshots

tomdkat · 23-Jun-2008, 05:23 PM #5

Are you taking a HTML design class or something? The problem is with the absolute positioning:

Code:

<div style="padding:''; position: absolute; top: 460; left: 565; z-index: 5; width: 400; height: 25; ">

That is an invalid "padding" attribute and the absolute positioning is preventing the buttons from appearing. Get rid of the absolute positioning and things will work better.

EDIT: Attached is a screenshot in Maxthon 2.1.1 (IE6 rendering engine). If you remove the absolute positioning of the menu, you'll also have to deal with the background image being absolutely positioned as well.

Peace...

leonistic · 23-Jun-2008, 05:30 PM #6

wow! you're a life saver.
yeah, I'm taking a html/css design class, I like designing pictures and all that but im not really that good with codes!

Thanks alot

Could you help me with the erm scroll bars? like see in the firefox screenshot, the text overflows.. is there a way to make it fixed?

TheRobatron · 23-Jun-2008, 05:37 PM #7

You can make the buttons and image appear in IE by taking out the position: absolute in the two divs containing the image and buttons. You'll have to mess around with the positioning to get it right, but at least you can see them.

tomdkat · 23-Jun-2008, 05:38 PM #8

Quote:

Originally Posted by TheRobatron

You can make the buttons and image appear in IE by taking out the position: absolute in the two divs containing the image and buttons. You'll have to mess around with the positioning to get it right, but at least you can see them.

Great minds think alike.

Peace...

leonistic · 23-Jun-2008, 05:40 PM #9

I've taken out the position:absolute from the image and buttons already, the image and the buttons are now both viewable in IE but the buttons are now out of place.. Is there anyway to fix this?

PS: The overflow text thingie too

tomdkat · 23-Jun-2008, 05:46 PM **#10**

Quote:

Originally Posted by leonistic

I've taken out the position:absolute from the image and buttons already, the image and the buttons are now both viewable in IE but the buttons are now out of place.. Is there anyway to fix this?

Yep, adjust the margins and/or padding of the elements to place them where you want them to go. The screenshot I posted shows the buttons positioned without using absolute positioning. I was using IE6 and have no idea how it would look in IE7.

Good luck!

Peace...

TheRobatron · 23-Jun-2008, 05:49 PM **#11**

Quote:

Originally Posted by tomdkat

Great minds think alike.

Sorry tomdkat, I was so absorbed in looking at the problem I didn't check to see if anyone had beaten me to it

Leonistic, what do you mean by the text overflow? The text boxes both look the same to me...

leonistic · 23-Jun-2008, 05:54 PM **#12**

erm, its kinda hard to explain. let me try,
look at the 'firefox' screenie i posted, look at the contents, the text overflows and is cut out.. I dont want that.. its ok if this is not possible ~ the position thingie is giving me a headache now.. haha thanks anyway!

TheRobatron · 23-Jun-2008, 05:59 PM **#13**

Do you mean the line that is half cut off? If so, that's just Firefox. If not, I'm not really sure

As for the positioning, if you're in a hurry, you could resort to using tables (though it's not the correct way of doing this). If your code is being marked, you may get marked down for using tables instead of divs, but it's quicker

leonistic · 23-Jun-2008, 06:12 PM **#14**

Alrighty, thanks alot for your help guys.
Appreciate it!

Thanks again~

tomdkat · 23-Jun-2008, 07:36 PM **#15**

Quote:

Originally Posted by TheRobatron

Do you mean the line that is half cut off? If so, that's just Firefox. If not, I'm not really sure

It's not "just Firefox", it's the DIV or iframe not having enough height for the text that is being displayed. That DIV can have the scrollbar suppressed but then not all of the text will be visible. Is the idea to get rid of the scrollbar?

Peace...

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)