Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

why doesn't opera / FF display my border? 1

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
GB
Hi,

I have the following CSS....
Code: 
#advert {
    display:none;
    width:100%; 
    height:100%; 
    color:#ffffff; 
    z-index:9999; 
    background-color:#000000;  
    margin:0; 
    padding:0;
    border:0;    
    position:absolute;
    top:0;
    left:0;
}   

#advert * {
    margin:0; 
    padding:0;
    border:0;
}       

#advert table {
    height:100%; 
    width:100%; 
    background-color:#000;
}    

#advert td input {
    cursor:pointer;
}  
 
#messageScroller {
    text-align:left;
    border: 1px solid black;    
    color:#000;  
    width: 670px;         
    overflow:hidden;       
    height:110px;   
    z-index:99999;
    float:left;
    background-color:#FFFFFF;
    margin-top:-310px;
    margin-left:160px;
}

#messageScroller span  {
    color:#233e97;
    font-family: Arial, Verdana;
    padding:1px; 
    font-weight:bold;
    display:block;
    margin-bottom:6px;
}

#scrollMSG {
    height:110px;    
    position:relative;   
    margin:5px;    
}

.scrollMSG {
    height:110px;
    margin-bottom:10px;
}
   
#splashIMG {
    float:none;
    display:block;
    position:static;
}

and the X/HTML ....
Code: 
<div id="advert">
    <table>
    <tr>
        <td align="left" valign="top"><input type="button" value="Close Window" title="Close Advert" onclick="hideit();" /></td>
        <td align="right" valign="top"><input type="button" value="Close Window" title="Close Advert" onclick="hideit();" /></td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <img id="splashIMG" src="<tmpl_var name='url_to_domain'>/images/BDF/BG-May2010.jpg" usemap="#splashIMG" />
            <div id="messageScroller"  onmouseover="stop_scroll();" onmouseout="start_scroll();">
                <div id="scrollMSG"></div>
            </div>                                
        </td>
    </tr>    
    <tr>
        <td align="left" valign="bottom"><input type="button" value="Close Window" title="Close Advert" onclick="hideit();" /></td>
        <td align="right" valign="bottom"><input type="button" value="Close Window" title="Close Advert" onclick="hideit();" /></td>
    </tr>
    </table>
    <map name="splashIMG">
        <area shape="rect"..... (removed links)                 
    </map>
</div>

messageScroller should have a black border but it doesn't display?

What am I missing? it displays fine in IE 7/8

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts
 
Sort by date Sort by votes
no because the image it is floated over is white!

here is a screen shot in IE vs FF





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts
 
Upvote 0 Downvote
Hi

Got it. My reproduction of your page missed the image.

Your #messageScroller is still in the page flow, so behind #splashIMG. Only #messageScroller span is removed from the page flow and raised above #splashIMG. So the border was displayed correctly, but covered by the image, so not visible.

Add [tt]display: relative;[/tt] to #messageScroller to remove it from the page flow so [tt]z-index[/tt] to have effect.

Feherke.
 
Upvote 0 Downvote
lol - just realised your faux pas!

don't you mean "position:relative;" ;-)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts
 
Upvote 0 Downvote
on a side not, doesn't 'float' take the object out of the normal flow?

why need the additonal position attribute?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts
 
Upvote 0 Downvote
Floating an element half-takes it out of the flow - it's still in its original place in the document, but floated to one side. More importantly in this case, other elements make room for the floated element.

Relative positioning doesn't really take an element out of the document flow either. It renders just the way it would have done, with space made in the document to accommodate it, but offset in position by the specified amount.

What you need here is absolute positioning. Give the enclosing <td> [tt]position:relative[/tt], then you can give #messagescroller [tt]position:absolute[/tt] with the appropriate [tt]top[/tt] and [tt]left[/tt] values to put it where you want it.

Use of a table here is questionable, though, and do you really need four close buttons?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
What you need here is absolute positioning. Give the enclosing <td> position:relative, then you can give #messagescroller position:absolute with the appropriate top and left values to put it where you want it.
Click to expand...

I did have it absolute positioning, however, I found then using top / left didn't work because it was relative to the users window size or screen resolution.

Which I've just noticed when testing has the same problem.... how do I resolve the box staying fixed when the image moves relative to the window size?

here is the problem...


I tried what Chris has suggested and now I get this...


why is the div scroller box where it is using the following...
Code: 
#advert {
    display:none;
    width:100%; 
    height:100%; 
    color:#ffffff; 
    z-index:999; 
    background-color:#000000;  
    margin:0; 
    padding:0;
    border:0;    
    position:absolute;
    top:0;
    left:0;
}   

#advert * {
    margin:0; 
    padding:0;
    border:0;
}          

#advert table {
    height:100%; 
    width:100%; 
    background-color:#000;
}   

#advert td {
    position:relative;
}
    
#advert td input {
    cursor:pointer;
}     
 
#messageScroller {
    text-align:left;
    border: 1px solid black;    
    color:#000;  
    width: 670px;         
    overflow:hidden;       
    height:110px;   
    z-index:99999;
    float:left;
    background-color:#FFFFFF;
    margin-top:-310px;
    position:absolute;  
}

#messageScroller span  {
    color:#233e97;
	font-family: Arial, Verdana;
	padding:1px; 
	font-weight:bold;
	display:block;
	margin-bottom:6px;
}

#scrollMSG {
    height:110px;    
    position:relative;   
    margin:5px;    
}

.scrollMSG {
    height:110px;
    margin-bottom:10px;
}
   
#splashIMG {
    float:none;
    display:block;
}

Use of a table here is questionable, though, and do you really need four close buttons?
Click to expand...

Yes the use of a table is a bit dodgy but as the Director specifically requested 4 close buttons, one at each corner of the splash screen.

How do you easily do that and make it fluid for various screen resolutions?

How would you display a splash screen with four close buttons the way I have, hmmm ok I could make them part of the initial image and then map them granted, but as I don't design the main screen (the boss did it in powerpoint).

All I get is a JPG to add the dymanic content scroller and map the logos to the flash content and PDF click throughs.

using a table makes it easy to achive what I want without having to add anything to the splash image.

but I'm open to suggestions.




"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts
 
Upvote 0 Downvote
lol I thoguht I'd cracked it by adding a margin-left:-70% , well it works in IE, but now the scroller isn't visible in FF

it's way off to the left?


why is this so difficult to float a div over an image?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts
 
Upvote 0 Downvote
I cracked it in the end with...
Code: 
#advert {
    display:none;
    width:100%; 
    height:100%; 
    color:#FFF; 
    z-index:999; 
    background-color:#000;  
    margin:0; 
    padding:0;
    border:0;    
    position:absolute;
    top:0;
    left:0;
}   

#advert * {
    margin:0; 
    padding:0;
    border:0;
}          

#advert table {
    height:100%; 
    width:100%; 
    background-color:#000;
}               
    
#advert td input {
    cursor:pointer;
}     
 
#messageScroller {
    text-align:left;
    border: 1px solid black;    
    color:#000;  
    width: 670px;         
    overflow:hidden;       
    height:110px;   
    z-index:99999;
    background-color:#FFF;
    margin-left:-270px;
    margin-top:-315px; 
    position:relative;
}

#messageScroller span  {
    color:#233e97;
	font-family: Arial, Verdana;
	padding:1px; 
	font-weight:bold;
	display:block;
	margin-bottom:6px;
}

#scrollMSG {
    height:110px;    
    position:relative;   
    margin:5px;    
}

.scrollMSG {
    height:110px;
    margin-bottom:10px;
}    

#splash {
    height:720px;
}

and
Code: 
        <td colspan="2" align="center" valign="top" id="splash">
                <img id="splashIMG" src="<tmpl_var name='url_to_domain'>/images/BDF/BG-May2010.jpg" usemap="#splashIMG" />
                <div id="messageScroller"  onmouseover="stop_scroll();" onmouseout="start_scroll();">
                    <div id="scrollMSG"></div>
                </div>                                                                                   
        </td>

I had to add the #splash id to the TD containing the image/scroller as firefox refused to expand the td to the correct height and so the image seemed to float out of the containing td even though no float is applied, like usual it displayed fine in IE but not FF or Opera.

So I added the #splash id and made it the height of the image and now it looks fine in all resolutions, all window sizes and all major browsers.

[wiggle]

right, on with something far more constuctive!



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
645
PeDa
PeDa
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
813
spamjim
spamjim
lupidol
  • Locked
  • Question
Table's title row's rounded corners border 1
Replies
2
Views
149
lupidol
lupidol
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
214
jjgupta915
jjgupta915
BobMCT
  • Locked
  • Question
Suggestions on display retrieved date time for editing?
Replies
2
Views
118
BobMCT
BobMCT

Part and Inventory Search

Sponsor

Back
Top