11 replies [Last post]
Aaron
Offline
Regular
Last seen: 7 years 9 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Hi All,

It's been a few weeks since my last confession.

The title pretty much sums up the problem. I have a dotted line background that is used to delinate the columns (check it out in Opera or IE) and Mozilla is ignoring it

http://www.sugarfixdesign.com/client/hca/lodging.htm

Any advice on how to fix it would be great.

Also, any advice in general would be welcomed. We're about ready to launch this site once the client gives final approval and verifies that the copy is how they want it.

Thanks,

Aaron

Bigdawg
Offline
Enthusiast
Last seen: 11 years 1 week ago
Joined: 2003-12-16
Posts: 65
Points: 0

Mozilla drops BG image

Just add {border: dotted;} to your columns and make sure that ir can be seen IE proper widths

Aaron
Offline
Regular
Last seen: 7 years 9 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Mozilla drops BG image

Hi Bigdawg,

I had used borders before but I couldn't get them to all stretch to 100% height so I had to use a background image to get the borders the same height regardless of the content.

Surely there is a way to have Mozilla display the image. I'm pretty sure I've done it before but can't figure out what I could be doing wrong to not have it show up...

Thanks,

Aaron

Bigdawg
Offline
Enthusiast
Last seen: 11 years 1 week ago
Joined: 2003-12-16
Posts: 65
Points: 0

Mozilla drops BG image

#main {
background-color:#000000;
border-left: dashed;
float:right;
width:750px;

This is just a generic example but if you put it in main content it will cover 100% as long as nothing is in it's way. give me a sec and I will upload a file so you can see what I mean

http://www.bigdawgcaps.com/laser3.htm

Aaron
Offline
Regular
Last seen: 7 years 9 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Mozilla drops BG image

I see what you mean but that won't give me 4 vertical lines to enclose each column and if I use the borders on the individual column div then they won't extend full 100% height.

Did you check the page in IE or Opera to see what I want it to look like?

Aaron

Aaron
Offline
Regular
Last seen: 7 years 9 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Mozilla drops BG image

Certainly this isn't a stumper. Doesn't anyone know what the problem might be or have any feedback in general?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 hours 42 min ago
Brisbane
Timezone: GMT+9
Joined: 2003-03-12
Posts: 5151
Points: 2749

Mozilla drops BG image

Hi Aaron,
Try this:
#columns:after{content:"."; display:block; clear:both; visibility:hidden;}

http://www.csscreator.com/attributes/containedfloat.php

Hope that helps

Bigdawg
Offline
Enthusiast
Last seen: 11 years 1 week ago
Joined: 2003-12-16
Posts: 65
Points: 0

Mozilla drops BG image

.floaty {
float: left;
padding: 5px 10px 5px 5px;
border: left,dashed, #000;
margin: 0px 20px 10px 0px;
width: 200px;
text-align: left
}
.clear { clear: both
This may work also.

Aaron
Offline
Regular
Last seen: 7 years 9 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Mozilla drops BG image

OUTSTANDING!!! \:D/

As much as I've had to deal with that problem of the unclosed div and, in fact, fixed that very problem several times in the production of this site, it never occured to me that it could cause this...

As soon as I plug in the clearing information then everything is right as rain!

Thank you both VERY much for helping. Thanks to you Tony for the articles, I never knew there was a different way to clear a div other than the adding a blank div with clear: both; blah, blah, blah. I'll read up!

Aaron

Bigdawg
Offline
Enthusiast
Last seen: 11 years 1 week ago
Joined: 2003-12-16
Posts: 65
Points: 0

Mozilla drops BG image

I see it works now but am having a hard time to find the code that makes it happen! Could you please point it out Thanks BD

Aaron
Offline
Regular
Last seen: 7 years 9 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Mozilla drops BG image

This is the CSS that makes the div close:

Quote:
.clear {
clear: both;
/*** these next attributes are designed to keep the div height to 0 pixels high, critical for Safari and Netscape 7 ***/
height: 1px;
overflow: hidden;
margin-bottom: -1px;
}
* html .clear {
display: none;
} /*** stops IE browsers from displaying the clear div/br in the page, as these are for Moz/Opera and Safari only. If IE 5.x Win DID display these, the page is too high ***/

After that, all you need is this at the end of a div right before you close it.

Quote:
<div class="clear">&nbsp;</div>

I haven't tried the suggestion that Tony gave yet (just because I already had this fix in place for other issues in the site and I haven't taken the time to sit and understand it yet) but knowing him it works perfectly.

I hope this was what you were looking for, if not then let me know and I'll try to help you sort it out.

Aaron

Bigdawg
Offline
Enthusiast
Last seen: 11 years 1 week ago
Joined: 2003-12-16
Posts: 65
Points: 0

Mozilla drops BG image

Thanks I just got confused from looking at several files today and when I looked at yours I could not put my finger on it. That is it Again Thanks BD