15 replies [Last post]
zhastro
zhastro's picture
Offline
Enthusiast
Indonesia
Last seen: 9 years 19 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2005-10-22
Posts: 73
Points: 0

Hi, Guys it's me again.

I have problem with my code.

I have 2 header (header and header1) that i use for my marquee text (header1) and my navigation (header).

in my IE 6 and Moz Firefox 7 my marquee text placed in my header1 box (just show exactly like i want), but in my Opera my marquee text placed below my header1 box.

I try to fixed it, but i guess i ain't mastered css enough Wink. So pls help me guys!

you can click here http://www.geocities.com/zhastro

many thanks, muchos gracias, terima kasih, nuhun, danke, arigatoo, syukron!

here's the code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Gaya 93.6 FM | The Real Family Station</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<meta http-equiv="Content-Type" content="text/html;">
<meta name="description" content="FW MX 2004 DW MX 2004 HTML">

<script language="JavaScript">

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

</script>
</head>

<div id="wrapper">
<div id="header1">
<marquee>
<p>GAYA TOP 10: 1. Teach Me How To Dream - Robin McAuley | 2. Just Take My Heart - Mr. Big | 3. Till Death Do Us Part - Whitelion | 4. I Am - Bon Jovi | 5. Love - John Lennon | 6. Here, There, And Everywhere - The Beatles | 7. No Me Ames - Jennifer Lopez feat. Marc Anthony | 8. Changes - Black Sabbath | 9. Linger - Cranberries | 10. Two Step Behind - Def Leppard </p>
</marquee>
</div>

<div id="header">
<img src="img_header/1_logo.gif" alt="Selamat Datang di Gaya 93.6 FM | The Real Family Station" width="223" height="43"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','img_header/2_home_r.gif',1)"><img src="img_header/2_home.gif" alt="Gaya 93.6 FM | the real family station in town!" name="Home" width="50" height="43" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','img_header/3_info_r.gif',1)"><img src="img_header/3_info.gif" alt="Info Pemasangan Iklan, Kerjasama Bisnis" name="Image3" width="83" height="43" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','img_header/4_program_r.gif',1)"><img src="img_header/4_program.gif" alt="Program Unggulan Radio Gaya 93.6 FM" name="Image4" width="108" height="43" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','img_header/5_forum_r.gif',1)"><img src="img_header/5_forum.gif" alt="Forum Pendengar" name="Image5" width="122" height="43" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','img_header/6_news_r.gif',1)"><img src="img_header/6_news.gif" alt="Berita Gaya" name="Image6" width="81" height="43" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','img_header/7_contact_r.gif',1)"><img src="img_header/7_contact.gif" alt="Hubungi Kami" name="Image7" width="84" height="43" border="0"></a></div>

</div>

<div id="content">

<div id="right">
<h1> </h1>
<div class="r1">


</div>

<div class="r2">


</div>

</div>

<div id="left">

</div>

<div id="footer">

<div class="up">
<div id="navigation">
<ul>
<li><a href="#">Home </a></li>
<li><a href="#">Info Bisnis </a></li>
<li><a href="#">Radio Program </a></li>
<li><a href="#">Forum Pendengar </a>
<li><a href="#">Hot News </a>
<li><a href="#">Contact Us </a></li>
</ul>
</div>
</div>

<div class="down">
<p>Design by SABUKHITAM Team 2005 </p>
</div>

</div>

</div>
</div>
</body>
</html>

And The CSS:

/* CSS Document Created By Trian Turangga */

body {
color:#999;
text-align: center;
font: 100% Arial, Helvetica, sans-serif;
margin: 0 0 0 0;
background-color: #FFFFFF;

}

#wrapper {
text-align: left;
height:70px;
width: 760px;
margin: 0;
background: #FFFFFF;
}

#header {
height: 45px;
width:760px;
text-align: center;
border: #339900 2px solid;
margin:2px 2px 2px 2px;
padding:4px 0 2px 0;
}

#header1 {
height: 20px;
width:760px;
text-align: right;
border: #339900 2px solid;
margin:2px 2px 6px 2px;
padding:2px 0 2px 0;
}

#header1 p {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:75%;
color:#339900;
padding:2px 0 2px 0;
}

#left {
float:left;
width: 225px;
padding: 2px;
}

#left p{
font-size: 80%;
color: #666;
line-height: 1.2em;
}

#right {
float:right;
width: 500px;
border-left: 1px dotted #cccccc;
color: #333333;
padding: 10px;
}

#right p {
font-size: 100%;
color: #666;
line-height:1.2em;
}

.r1 {
float:left;
width: 200 px;
padding: 2px;
}

.r2 {
float:right;
width: 200 px;
padding: 2px;
}

#footer{
clear:both;
height:50px;
text-align: center;
width:760px;
border: #339900 2px solid;
padding:2px 2px 2px 2px;
}

.up {
height:20px;
width: 760 px;
padding: 2px 2px 2px 2px;
font-family: 75% Geneva, Arial, Helvetica, sans-serif;
font-size:75%;
background-color:#BED090;
border:2px solid #339900;
}

.down {
height:20px;
width: 760 px;
padding: 2px 2px 2px 2px;
font-family: 75% Geneva, Arial, Helvetica, sans-serif;
color:#BED090;
background-color:#FFFFFF;
}

#footer p {
margin-top: 5px;
font-size: 70%;
color:#BED090;
}

p {
font-size: 80%;
color: #666666;
}

h1 {
color: #666;
font-size: 100%;

}

h2 {
font-size: 95%; color: #666;
margin: 12px;
}

h3{
font-size: 100%;
color: #666;
border:1px 1px 1px 1px solid;
padding:5px 5px 5px 5px;
background-color:#CCCCCC;
text-align:center;
font-weight:bold;
}

#code {
font-size: 60%;
border:2px solid #000000;
padding: 2px 2px 2px 2px;
width: 215px;
text-align:justify;
margin-top:0px;
margin-bottom:5px;
}

#code2 {
font-size: 60%;
border:2px solid #DDDDDD;
padding: 2px 2px 2px 2px;
width: 215px;
text-align:justify;
margin-top:0px;
margin-bottom:5px;
background-color:#EEEEEE;
}

#navigation {
font-family:75% Geneva, Arial, Helvetica, sans-serif;
}

#navigation ul {
list-style:none;
margin:0;
padding:0;
}

#navigation li {
padding:0 4px 0 0;
font-family:75% Geneva, Arial, Helvetica, sans-serif;
display:inline;
}

#navigation a:link, #navigation a:visited {
padding:0 4px 0 0;
font-family:75% Geneva, Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-decoration:none;
}

#navigation a:hover {
padding:0 4px 0 0;
font-family:75% Geneva, Arial, Helvetica, sans-serif;
color:#339900;
text-decoration:none;
}

a:link {font-family:75% Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:none;}
a:visited {font-family:75% Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:none;}
a:active {font-family:75% Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:none;}
a:hover {font-family:75% Arial, Helvetica, sans-serif; color:#DDDDDD; text-decoration:none;}

/* End Of CSS Document Wink Trian Sucessfully made it! */

Only You Can Reach Me Now....
Only You Can Teach Me Now...
Teach Me How To Dream...

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 4 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Help! problem with Opera (marquee didn't work!)

Shock Shock Shock

You didn't just say . . marquee . . . did you?

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Help! problem with Opera (marquee didn't work!)

Hi

My guess would be different default margins and padding on the P and MARQUEE elements. Try setting both to have 0 inside header1:

#header1 marquee, #header1 p{margin:0;padding:0}

Trevor

Anonymous
Anonymous's picture
Guru

Help! problem with Opera (marquee didn't work!)

thepineapplehead wrote:
Shock Shock Shock

You didn't just say . . marquee . . . did you?I'm cleaning out my ears and listening again. Shock Shock Shock

zhastro
zhastro's picture
Offline
Enthusiast
Indonesia
Last seen: 9 years 19 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2005-10-22
Posts: 73
Points: 0

Help! problem with Opera (marquee didn't work!)

Thank You Guys esp. ClevaTreva... you awesome Laughing out loud it works!

check it out @ www.geocities.com/zhastro

well, gonna finished it soon.

Only You Can Reach Me Now....
Only You Can Teach Me Now...
Teach Me How To Dream...

Anonymous
Anonymous's picture
Guru

Help! problem with Opera (marquee didn't work!)

ClevaTreva wrote:
#header1 marquee{display:none;}
#header1 p{margin:0;padding:0}
Fixed. Laughing out loud

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Help! problem with Opera (marquee didn't work!)

Hey

Now that's funny but not nice :? Sad

They wanted to have a marquee. Display none, whilst absolutely appropriate IMHO, was NOT recommended by me.

I know, when teaching ICT (which I do), I threaten (half-heartedly) to throw anyone who use a marque off a high cliff if they use them.

Not that I have extreme views, you know.

BUT, I do NOT impose my VIEWS on others (much).

Trevor

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Help! problem with Opera (marquee didn't work!)

Quote:
BUT, I do NOT impose my VIEWS on others


BUT, maybe we should be; at least ensuring that people are aware that it is not a favoured element, especially on a CSS, Standards focused board. Consequence of not doing so could be to give the impression that any old code goes, that we are happy to indulge outdated, deprecated, proprietary, invalid, markup. Not that it means we don't provide an answer, just that it could & should be a qualified one.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

zhastro
zhastro's picture
Offline
Enthusiast
Indonesia
Last seen: 9 years 19 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2005-10-22
Posts: 73
Points: 0

Help! problem with Opera (marquee didn't work!)

I've notice that only ClevaTreva who haven't 'bad' image on marquee, what's wrong with it anyway?

hugo said it not a very favoured element in css, can anyone tell me why?

i'm quite new in css web design, so it would be nice if you (the masters) would share information about what's cool and what's not with css....

thx

Only You Can Reach Me Now....
Only You Can Teach Me Now...
Teach Me How To Dream...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Help! problem with Opera (marquee didn't work!)

It's a proprietary IE only tag, this is not good, proprietary code in browsers is part of the problem that has a plague on the march of a unified Standard and a lack of a common adhered to Standard is that which is the very stuff of our nightmares when working with code.

It is distracting to have scrolling text on a screen, it can disrupt peoples ability to focus and read static text and in extreme cases could possibly cause fits much like the blink tag :mad:.

It's just plain out of date, and it's use demonstrates someone stuck in the nineties.

Other things to watch out for are listed in this slightly amusing non-technical take on things:

http://www.catb.org/~esr/html-hell.html

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 37 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Help! problem with Opera (marquee didn't work!)

Primarily from my point of view, it is annoying. It's right there with animated gifs, blinking text and decorative Flash objects as worthless, annoying distractions.

Any motion is meant to get attention. The problem is that they continue to attract attention long after their job is done.

On a serious note, blinking and movement can cause great difficulties for people with cognitive and attention deficit disorders. In some countries, such properties could be interpreted as being in violation of disability laws.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Anonymous
Anonymous's picture
Guru

Help! problem with Opera (marquee didn't work!)

The biggest problem I have with <marquee> is that I am not going to wait to read something. By the time the last word decides to mosey on into view, I have already clicked the close button on the browser.

zhastro
zhastro's picture
Offline
Enthusiast
Indonesia
Last seen: 9 years 19 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2005-10-22
Posts: 73
Points: 0

Help! problem with Opera (marquee didn't work!)

wow, i click http://www.catb.org/~esr/html-hell.html and i noticed that i made a lot of mistake :oops: , quite scarry dough! but i think a lot of web designer (newbie or not) don't know that, do you?

so, is it any 'positive' way to make impression to our visitor without using marquee or sumthin like that?

take my site for example, my marquee section is for sumthin like songs chart in radios, any idea for fixing that (not using marquee)?

thx guys!

Only You Can Reach Me Now....
Only You Can Teach Me Now...
Teach Me How To Dream...

Anonymous
Anonymous's picture
Guru

Help! problem with Opera (marquee didn't work!)

zhastro wrote:
wow, i click http://www.catb.org/~esr/html-*beep*.html and i noticed that i made a lot of mistake :oops: , quite scarry dough! but i think a lot of web designer (newbie or not) don't know that, do you?
We won't laugh if you make a mistake as long as you learn from it. Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 37 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Help! problem with Opera (marquee didn't work!)

If you want to impress your visitors, give'm content. Then give them more content. If you want to catch your visitor's eye, give them a clean layout with enough white space that the eye finds what it's looking for as a distinct item.

For your song list, code it as a list. If there are more than eight or ten items, you can fix the height of the list container, ul, and make it {overflow: auto;}. If the visitor wants to see the song list, she can scroll it herself. Just be sure to make the height large enough to hold a comfortable number of songs.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

zhastro
zhastro's picture
Offline
Enthusiast
Indonesia
Last seen: 9 years 19 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2005-10-22
Posts: 73
Points: 0

(resolved)

thx everybody, i think enough for this topic.

you all are great, muchos gracias!

Only You Can Reach Me Now....
Only You Can Teach Me Now...
Teach Me How To Dream...