PDA

View Full Version : CSS problem

Savarona
01-29-2008, 12:52 PM
Hi all,

Why this page run correctly when i open only itself with explorer?
And why not run correctly when i try to open it in iframe window with mainpage?

This is the code of Page:


<!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=iso-8859-1" />
<title>Untitled Document</title>

<STYLE type=text/css>
#map {
WIDTH: 490px;
POSITION: relative;
HEIGHT: 500px;
margin: 0px;
}
#map UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 0px
}
#map UL LI {
POSITION: absolute
}
#map UL LI#sun {
LEFT: 246px; WIDTH: 64px; TOP: 58px; HEIGHT: 59px
}
#map UL LI#mercury {
LEFT: 291px; WIDTH: 69px; TOP: 77px; HEIGHT: 70px
}
#map UL LI#venus {
LEFT: 130px; WIDTH: 117px; TOP: 306px; HEIGHT: 119px
}
#map UL LI#moon {
LEFT: 346px; WIDTH: 104px; TOP: 352px; HEIGHT: 104px
}
#map UL LI#earth {
LEFT: 343px; WIDTH: 76px; TOP: 231px; HEIGHT: 62px
}
* HTML #map UL LI {
POSITION: static
}
* HTML #map UL LI A.tl {
POSITION: absolute
}
* HTML #map UL LI#sun A.tl {
LEFT: 245px; TOP: 57px}
* HTML #map UL LI#mercury A.tl {
LEFT: 291px; TOP: 77px
}
* HTML #map UL LI#venus A.tl {
LEFT: 130px; TOP: 306px
}
* HTML #map UL LI#moon A.tl {
LEFT: 346px; TOP: 352px
}
* HTML #map UL LI#earth A.tl {
LEFT: 343px; TOP: 231px
}
#map UL LI A {
TEXT-DECORATION: none
}
#map UL LI A.tl {
DISPLAY: block; BACKGROUND: url(planets/transparent.gif); TEXT-INDENT: -9999px
}
#map UL LI A.tl:hover {
Z-INDEX: 500
}
#map UL LI:hover {
Z-INDEX: 500
}
#map UL LI#sun A.tl {
WIDTH: 64px; HEIGHT: 59px
}
#map UL LI#sun A.tl:hover {
BACKGROUND: url(kanca2.gif)

}
#map UL LI#sun:hover {
BACKGROUND: url(kanca2.gif)
}
#map UL LI#mercury A.tl {
WIDTH: 69px; HEIGHT: 70px
}
#map UL LI#mercury A.tl:hover {
BACKGROUND: url(planets/mercury.jpg)
}
#map UL LI#mercury:hover {
BACKGROUND: url(planets/mercury.jpg)
}
#map UL LI#venus A.tl {
WIDTH: 117px; HEIGHT: 119px
}
#map UL LI#venus A.tl:hover {
BACKGROUND: url(planets/venus.jpg)
}
#map UL LI#venus:hover {
BACKGROUND: url(planets/venus.jpg)
}
#map UL LI#moon A.tl {
WIDTH: 104px; HEIGHT: 104px
}
#map UL LI#moon A.tl:hover {
BACKGROUND: url(planets/moon.jpg)
}
#map UL LI#moon:hover {
BACKGROUND: url(planets/moon.jpg)
}
#map UL LI#earth A.tl {
WIDTH: 76px; HEIGHT: 62px}
#map UL LI#earth A.tl:hover {
BACKGROUND: url(oktas2.gif)
}
#map UL LI#earth:hover {
BACKGROUND: url(planets/earth.jpg)
}
#map UL LI .xsnazzy {
VISIBILITY: hidden
}
#map UL LI A .xsnazzy {
VISIBILITY: hidden
}
* HTML #map UL LI A.tl:hover {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
* HTML #map UL LI A:hover .xsnazzy {
VISIBILITY: visible
}
#map UL LI:hover .xsnazzy {
VISIBILITY: visible
}
#map UL LI:hover .xsnazzy {
BACKGROUND: url(arkaplan2.gif)
}
.xsnazzy {
DISPLAY: block; POSITION: absolute; HEIGHT: auto; TEXT-ALIGN: center
}
#sun .xsnazzy {
LEFT: -186px; WIDTH: 300px; TOP: 188px}
#mercury .xsnazzy {
LEFT: 55px; WIDTH: 210px; TOP: -20px
}
#venus .xsnazzy {
LEFT: -130px; WIDTH: 130px; TOP: -90px
}
#moon .xsnazzy {
LEFT: -195px; WIDTH: 300px; TOP: -160px
}
#earth .xsnazzy {
LEFT: -70px; WIDTH: 250px; TOP: -160px
}
.xsnazzy H1 {
MARGIN: 0px 10px
}
.xsnazzy P {
MARGIN: 0px 10px
}
.xsnazzy H1 {
FONT-SIZE: 2.5em; COLOR: #6f9; BORDER-BOTTOM: #fff 1px solid; FONT-FAMILY: georgia, "times new roman", serif
}
.xsnazzy P {
FONT-SIZE: 12px; PADDING-BOTTOM: 0.5em; COLOR: #eee; TEXT-ALIGN: left
}
.xsnazzy {
BACKGROUND: none transparent scroll repeat 0% 0%; MARGIN: 1em
}
.xb1 {
DISPLAY: block; FONT-SIZE: 0px; OVERFLOW: hidden
}
.xb2 {
DISPLAY: block; FONT-SIZE: 0px; OVERFLOW: hidden
}
.xb3 {
DISPLAY: block; FONT-SIZE: 0px; OVERFLOW: hidden
}
.xb4 {
DISPLAY: block; FONT-SIZE: 0px; OVERFLOW: hidden
}
.xb5 {
DISPLAY: block; FONT-SIZE: 0px; OVERFLOW: hidden
}
.xb6 {
DISPLAY: block; FONT-SIZE: 0px; OVERFLOW: hidden
}
.xb7 {
DISPLAY: block; FONT-SIZE: 0px; OVERFLOW: hidden
}
.xb1 {
HEIGHT: 1px
}
.xb2 {
HEIGHT: 1px
}
.xb3 {
HEIGHT: 1px
}
.xb4 {
HEIGHT: 1px
}
.xb5 {
HEIGHT: 1px
}
.xb6 {
HEIGHT: 1px
}
.xb4 {
BORDER-RIGHT: #fff 1px solid; BACKGROUND: #ccc; BORDER-LEFT: #fff 1px solid
}
.xb5 {
BORDER-RIGHT: #fff 1px solid; BACKGROUND: #ccc; BORDER-LEFT: #fff 1px solid
}
.xb6 {
BORDER-RIGHT: #fff 1px solid; BACKGROUND: #ccc; BORDER-LEFT: #fff 1px solid
}
.xb7 {
BORDER-RIGHT: #fff 1px solid; BACKGROUND: #ccc; BORDER-LEFT: #fff 1px solid
}
.xb1 {
BACKGROUND: #fff; MARGIN: 0px 8px
}
.xb2 {
BACKGROUND: #fff; MARGIN: 0px 6px
}
.xb3 {
BACKGROUND: #fff; MARGIN: 0px 4px
}
.xb4 {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 5px; BACKGROUND: #7f7f9c; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px 3px; BORDER-RIGHT-WIDTH: 5px
}
.xb5 {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 4px; BACKGROUND: #7f7f9c; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px 2px; BORDER-RIGHT-WIDTH: 4px
}
.xb6 {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 3px; BACKGROUND: #7f7f9c; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px 2px; BORDER-RIGHT-WIDTH: 3px
}
.xb7 {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 3px; BACKGROUND: #7f7f9c; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px 1px; HEIGHT: 2px; BORDER-RIGHT-WIDTH: 3px
}
.xboxcontent {
BORDER-RIGHT: #fff 3px solid;
BORDER-TOP: #fff 0px solid;
DISPLAY: block;
BORDER-LEFT: #fff 3px solid;
BORDER-BOTTOM: #fff 0px solid;
background-image: url();
}
.xboxcontent A {
PADDING-RIGHT: 1px; DISPLAY: block; PADDING-LEFT: 1px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 1px; COLOR: ; TEXT-INDENT: 0px; PADDING-TOP: 1px
}
.xboxcontent A:visited {
PADDING-RIGHT: 1px; DISPLAY: block; PADDING-LEFT: 1px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 1px; COLOR: ; TEXT-INDENT: 0px; PADDING-TOP: 1px
}
#map UL LI A:hover .xsnazzy .xboxcontent A:hover {
COLOR:
}
#map UL LI:hover .xsnazzy .xboxcontent A:hover {
COLOR: #fff
}
.xsnazzy EM.point_top {
DISPLAY: block; FONT-SIZE: 0px; BACKGROUND: url(planets/point.gif) center top; LEFT: 50px; WIDTH: 25px; POSITION: absolute; TOP: -11px; HEIGHT: 14px
}
.xsnazzy EM.point_bottom {
DISPLAY: block; FONT-SIZE: 0px; RIGHT: 50px; BACKGROUND: url(planets/point.gif) center bottom; WIDTH: 25px; BOTTOM: -11px; POSITION: absolute; HEIGHT: 14px
}
* HTML .xsnazzy EM.point_bottom {
BOTTOM: -11px
}
.xsnazzy EM.point_left {
DISPLAY: block; FONT-SIZE: 0px; BACKGROUND: url(planets/point.gif) left center; LEFT: -11px; WIDTH: 14px; POSITION: absolute; TOP: 30px; HEIGHT: 25px
}
.xsnazzy EM.point_right {
DISPLAY: block; FONT-SIZE: 0px; RIGHT: -11px; BACKGROUND: url(planets/point.gif) right center; WIDTH: 14px; POSITION: absolute; TOP: 125px; HEIGHT: 25px
}
* HTML .xsnazzy EM.point_right {
RIGHT: -11px
}
body {
margin-left: 0px;
margin-top: 0px;
background-repeat: no-repeat;
background-color: #000000;
margin-bottom: 30px;
}
</STYLE>
</head>

<body>
<DIV id=map>
<div align="left"><img title="solar system" alt="solar system"
src="tas23344444.gif" />


</div>
<UL>

<LI id=mercury><!--[if lte IE 6]><table><tr><td><![endif]-->

<DIV class=xsnazzy><EM class=point_left></EM><B class=xb1></B><B
class=xb2></B><B class=xb3></B><B class=xb4></B><B class=xb5></B><B
class=xb6></B><B class=xb7></B>
<DIV class=xboxcontent>
<H1>Mercury</H1>
<P>Mercury is a lump of rock, barely larger than the Moon</P><A
href="http://en.wikipedia.org/wiki/Mercury_(planet)">Wikipedia</A> <A
href="http://www.solarsystem.org.uk/mercury/">A planet of extremes</A> <A
href="http://www.nineplanets.org/mercury.html">General Information</A> </DIV><B class=xb7></B><B class=xb6></B><B class=xb5></B><B class=xb4></B><B
class=xb3></B><B class=xb2></B><B class=xb1></B></DIV><!--[if lte IE 6]></td></tr></table></a><![endif]--></LI>
<LI id=venus><A class=tl
href="http://www.cssplay.co.uk/menu/solar_map#nogo"><!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

<DIV class=xsnazzy><EM class=point_right></EM><B class=xb1></B><B
class=xb2></B><B class=xb3></B><B class=xb4></B><B class=xb5></B><B
class=xb6></B><B class=xb7></B>
<DIV class=xboxcontent>
<H1>Venus</H1>
<P>Venus has the densest atmosphere of the terrestrial planets, consisting
mostly of carbon dioxide.</P><A
href="http://en.wikipedia.org/wiki/Venus">Wikipedia</A> <A
href="http://www.nineplanets.org/venus.html">General information</A> <A
href="http://www.solarsystem.org.uk/venus/">Earth's twin</A> </DIV><B
class=xb7></B><B class=xb6></B><B class=xb5></B><B class=xb4></B><B
class=xb3></B><B class=xb2></B><B class=xb1></B></DIV><!--[if lte IE 6]></td></tr></table></a><![endif]--><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<DIV class=xsnazzy><EM class=point_bottom></EM><B class=xb1></B><B
class=xb2></B><B class=xb3></B><B class=xb4></B><B class=xb5></B><B
class=xb6></B><B class=xb7></B>
<DIV class=xboxcontent>
<H1>Moon</H1>
<P>The Moon is the only celestial body that human beings have orbited or
landed on</P>
<A href="http://moon.google.com/">Google Moon</A> <A
href="http://en.wikipedia.org/wiki/Moon">Wikipedia</A> <A
href="http://www.nineplanets.org/luna.html">General information</A> </DIV>
<B
class=xb7></B><B class=xb6></B></DIV>
</LI>
<LI id=earth><A class=tl
href="http://www.cssplay.co.uk/menu/solar_map#nogo"></A>
<DIV class=xsnazzy><EM class=point_bottom></EM><B class=xb1></B><B
class=xb2></B><B class=xb3></B><B class=xb4></B><B class=xb5></B><B
class=xb6></B><B class=xb7></B>
<DIV class=xboxcontent>
<H1>Earth</H1>
<P>Earth is the third planet from the Sun and the fifth largest:</P><A
href="http://en.wikipedia.org/wiki/Earth">Wikipedia</A> <A
href="http://earthobservatory.nasa.gov/">Earth observatory</A> <A
href="http://www.bbc.co.uk/nature/animals/planetearth/">Planet earth</A> </DIV><B class=xb7></B><B class=xb6></B><B class=xb5></B><B class=xb4></B><B
class=xb3></B><B class=xb2></B><B class=xb1></B></DIV><!--[if lte IE 6]></td></tr></table></a><![endif]--></LI>
<LI id=sun><A class=tl href="http://www.cssplay.co.uk/menu/solar_map" /></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

<DIV class=xsnazzy><EM class=point_top></EM><B class=xb1></B><B
class=xb2></B><B class=xb3></B><B class=xb4></B><B class=xb5></B><B
class=xb6></B><B class=xb7></B>

<DIV class=xboxcontent>
<H1>Sun</H1>
<P>The Sun is the most prominent feature in our solar system.</P><A
href="http://www.nineplanets.org/sol.html">General Information</A> <A
href="http://en.wikipedia.org/wiki/Sun">Wikipedia</A> <A
href="http://www.michielb.nl/sun/">A virtual tour</A> </DIV><B
class=xb7></B><B class=xb6></B><B class=xb5></B><B class=xb4></B><B
class=xb3></B><B class=xb2></B><B class=xb1></B></DIV>
<!-- end of info -->
<BR class=clear>
<!-- end of showcase -->
<!-- end of content -->
<!-- end of wrapper -->
<SCRIPT src="http://www.google-analytics.com/urchin.js" type=text/javascript>
</SCRIPT>

<SCRIPT type=text/javascript>
-451410-1";
urchinTracker();
</SCRIPT>

<SCRIPT
language=JavaScript>
<!--

window.open = SymRealWinOpen;

//-->
</SCRIPT>
</LI></UL>
</DIV>
</BODY></HTML>

</body>
</html>


This is the code of it's extension in mainpage:


<div id="Layer9" style="position: absolute; left: 185px; top: 186px; width: 30px; height: 147px; z-index: 6"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','LAYERTASARIMust.jpg',1)" onclick="document.getElementById('orhit').src='ferhat.html' ;"><img src="LAYERTASARIM.jpg" alt="Design" name="Image21" width="30" height="147" border="0" id="Image21" /></a></div>

This is the code of iframe in maingage:


<iframe src="AnasayfaorugenIFRAME.html" id="orhit" name="dff" width="519" height="570" align="right" scrolling="yes" frameborder=0></iframe>



*** please use code tags when posting code - dj ***
Cary
01-30-2008, 01:44 AM
Just looks like a black page without pictures. There are some 235 validation errors which need to be fixed before you can expect it to behave correctly. You can't cut corners when using xhtml. I'm not sure what you mean by "its extension". Do you have a URL we can look at?
Savarona
01-30-2008, 11:05 AM
Hi carry.
Picture is src="tas23344444.gif" />.

and extension mean sorry :) when i click the botton in main page this css page opens. Extension means button (mainpage) of the css page.

you can easly see the darft more clear just locating any images(gif) of size
64x59 insted of kanca2.gif and tas23344444.gif (490x565)

#
map UL LI#sun A.tl:hover {
BACKGROUND: url(kanca2.gif)

}
#map UL LI#sun:hover {
BACKGROUND: url(kanca2.gif)
domedia
01-30-2008, 01:20 PM
Hi Savarona,
You might have to rephrase the last post, it was kind of hard to understand. :)

What Cary was saying is that if you want to make an XHTML page, you have to be better with your coding practices. Run your site through a validator. Honestly the page is a mess. :-( You have empty bold and em tags everywhere, invalid structure (you can't put block elements inside lists), it's just really hard to see what you're trying to to.
Can you give a little background on how you ended up with this page?
Savarona
01-30-2008, 05:24 PM
<SCRIPT type=text/javascript>
_uacct = "UA-451410-1";
urchinTracker();
</SCRIPT>

<SCRIPT
language=JavaScript>
<!--

window.open = SymRealWinOpen;

//-->
</SCRIPT>
</BODY></HTML>

simple error.

This script run correctly with explorer 7.0. Why don't run in explorer 7.0 in iframe window?

*** code tags please !!! - dj ***
m1a2x3x7
01-30-2008, 07:45 PM
May I ask why are you using iframes?
Savarona
01-31-2008, 03:51 PM
May I ask why are you using iframes?

Hi,

i use iframe because i want to all pages open in one explorer window. I pay attention to plain apperance of the site. The left of the blank page of explorer is consist of buttons and the right side of explorer consist of iframe.This must work, it needs simple changing in code because i had solved similar to this problem before. i can solve with just experiment and mistake method.
domedia
01-31-2008, 04:57 PM
i use iframe because i want to all pages open in one explorer window. That's not really how you design a website Savarona :-/
Savarona
02-01-2008, 01:01 PM
Then see you later when i publish site. You're right. Problem can't be clear only with code.