Geekzone: technology news, blogs, forums
Welcome Guest.
You haven't logged in yet. If you don't have an account you can register now.

1 post

Wannabe Geek

# 64893 24-Jul-2010 21:06
Send private message

Hi guys. First post. Have just got into web design in the last month and am learning as i go. I am building a site for a friend and for some reson i really wanted to make a opaque (semi-transparent) border around the main container. I have a image for the main background so couldnt just use a color to get effect. Now, after about 5-6hrs of fumbling around a finaly got it and it looked perfect in IE, but when viewed in FF or GC iits NOT perfect.
So, i made the opaque border by placing an empty div with size to match my main container with the border that i wanted opaque, at the bottom of my page and used a -1500px placement and z-axis:-10; to get it to overlap the main container above it thus locating the border around my main container and then made this div opaque to get exactly what i wanted.

Now problem in FF and GC is that they are still show the empty div at the bottom of my page extending 1500px below my content and the overflow:invisible is not affecting it so there is a hugh empty space at the bottom in the browsers. Have also tried wrapping container in opaque div but that just makes everything opaque(and setting container opasity to 100,1 doesnt help, and have tried placing the opaque div at the top and then positioned it over the container below, but then just get the same problem except then theres a gap at the top.
If anyone can suggest a solution to this i would be extremely thankful.
my site is

thanks heaps, hope this make sence. ps. im new to web design so excuss the code. cheers

Create new topic
3355 posts

Uber Geek

  # 355928 24-Jul-2010 22:12
Send private message

What you are saying, is you want to be able to see the background, and have the middle bits in a box in the centre?

Like an invisible border?

I just did a local hack of it. Deleted your overflow border DIV

Added a few

lines to get rid of overflows

I replaced your margin-... set in the container and put
margin: 0 auto (0 top and bottom, scalable sides)

And on your header add a "margin-top 60px;" or so to drop it down some.

And the footer a "margin-bottom 60px;" or similar. Both look fine in IE and FF then

Margins are your friend since you are using a container DIV.

It designates the space around the DIVs distance from its parent before being an actual element.

(you have to imagine the white space being the BG.. I didnt do a full scrape)

3355 posts

Uber Geek

  # 355934 24-Jul-2010 22:53
Send private message

On second read.. if you want a semi transparent/opaque 5-10px border around the outside of your middle div, you be stoofed.

Reading up it can't be done at this point as all aspects of borders/opaqe properties are inhereted to the child DIVs and can't be.. un-inherited

You could however, perhaps make a couple of transparent gifs and put one on each corner of the internal divs to fake it?

Or make a larger background image (not ideal) with a colouration at the same area as the container size

Create new topic

Twitter and LinkedIn »

Follow us to receive Twitter updates when new discussions are posted in our forums:

Follow us to receive Twitter updates when news items and blogs are posted in our frontpage:

Follow us to receive Twitter updates when tech item prices are listed in our price comparison site:

News »

Logitech introduces new Made for Google keyboard and mouse devices
Posted 16-Oct-2019 13:36

MATTR launches to accelerate decentralised identity
Posted 16-Oct-2019 10:28

Vodafone X-Squad powers up for customers
Posted 16-Oct-2019 08:15

D Link ANZ launches EXO Smart Mesh Wi Fi Routers with McAfee protection
Posted 15-Oct-2019 11:31

Major Japanese retailer partners with smart New Zealand technology IMAGR
Posted 14-Oct-2019 10:29

Ola pioneers one-time passcode feature to fight rideshare fraud
Posted 14-Oct-2019 10:24

Spark Sport new home of NZC matches from 2020
Posted 10-Oct-2019 09:59

Meet Nola, Noel Leeming's new digital employee
Posted 4-Oct-2019 08:07

Registrations for Sprout Accelerator open for 2020 season
Posted 4-Oct-2019 08:02

Teletrac Navman welcomes AI tech leader Jens Meggers as new President
Posted 4-Oct-2019 07:41

Vodafone makes voice of 4G (VoLTE) official
Posted 4-Oct-2019 07:36

2degrees Reaches Milestone of 100,000 Broadband Customers
Posted 1-Oct-2019 09:17

Nokia 1 Plus available in New Zealand from 2nd October
Posted 30-Sep-2019 17:46

Ola integrates Apple Pay as payment method in New Zealand
Posted 25-Sep-2019 09:51

Facebook Portal to land in New Zealand
Posted 19-Sep-2019 18:35

Geekzone Live »

Try automatic live updates from Geekzone directly in your browser, without refreshing the page, with Geekzone Live now.

Support Geekzone »

Our community of supporters help make Geekzone possible. Click the button below to join them.

Support Geezone on PressPatron

Are you subscribed to our RSS feed? You can download the latest headlines and summaries from our stories directly to your computer or smartphone by using a feed reader.

Alternatively, you can receive a daily email with Geekzone updates.