CSS - Safari 1.2 Opacity Bug - Any Ideas?

Hey,
Ive used Macromedia Dreamweaver to design the following site. But for some reason the CSS seems to only work in IE. When I view the page in firefox, the CSS doesnt seem to work properly.

Ive never encounterd this before, and have run out of ideas.
What do you think?

Website Here

Cheers,
Smitch

I'm looking to add some angled corners to my tabs and maybe a bevel. Currently, my tabs are pure css with no js. Any way to angle the corners with css? Or am I going to have to whip out my Photoshop and use some images?

I've checked out alistapart.com and found his code to be too buggy. Any links to some other tutorials would be much appreciated.

NOTE: This is a learning project and NOT a REAL COMPANY

My Site

I'm not entirely sure where to put this, but as it concerns css, and quite possibly jquery, I'll roll it on into this forum.

I'm working on a new site, and I'm not entirely sure as how to handle the links of it, ideally i'd like it to be a 1-page affair as much as possible, so what I thought is that each link would open inside a div.

As you can see by the sketch below, I've a middle column which i dubbed 'SERVICES' that displays various categories of service that I have, hence the 3 centered columns below.

Here's the sketch:


Now at first thought, the 3 Categories would be a dropdown menu in essence, which I thought to make in jQuery, specifically a modified version of this:

http://buildinternet.com/live/smoot...mated-menu.html
Code for it is he http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/

On top of that, on hovering each link in this dropdown I thought to use a jQuery tooltip, that describes the service in brief, and once clicked more details would emerge of the service .. So if you fall back to my sketch, when a link in M1 is clicked, I'd want the details + a form to open in M2, as sketched.

Th problem I'm having is two-fold:
1. I dont have enough JQuery experience to mesh the tool-tip with the propsed drop-down
2. I'm not onventive enough to figure out how to make M1 result in M2 (the sketch yet again! lol)

Please please help me figure out a better way, or a good way to do this!

Hi,

I am new here, altough I have been comming here to search for solutions very often. I am a very great fan of CSS and have developed my own website (for my small bussiness) in pure CSS and XHTML.

Now, when I started developing my website I created a layout. I have stuck with the same layout ever since. This was my idea, altough the layout is used in different ways by other websites.

However something I did a lot was to browse other pure CSS websites. When there was something I liked I tried to recreate it (I never copied what other people did, always re-created myself).

The problem is that I started my website with the following colour scheme; Black, White and Red. After browsing some website I must admit that I did copy coloures from other websites. Again it is only the coloures I copied! All the implementation (CSS, Xhtml, JavaScript is my own) and when there was an image I liked (for example for the borders) I recreated it on my PC.

Now I am asking this question here because you people do CSS websites all the time. I know that some of you have been in this bussiness for some quite time and thus have the best advice on what should I do. Whether to leave my website as it is or else change it (note that I still did not launch my website). My question is related with Ethics as much as with legaility of what I did.

I am giving some extra detail of what I mean by copy the colour scheme and recreating images.

Copy Colour Scheme: Here I used a colour picker tool. I did not copy my colour scheme from just one website, but from various and used them within my layout (My layout is totaly different from the websites of which I copied the colours from).

Recreating images: This has been done for the borders and shading. Again I have taken ideas from different websites. What I did is see how they did it and then recreate it. Sometimes I altered the images to better fit my requirments. However I have some images which I recreated nearly pixle by pixle the same altough I am not using the same image that the websites are using (I have recreated a small part of it).

Now I checked the websites and there does not seem to be any copyright to protect images or colour scheme.

Also I am not planning to insert my website for any competition. I must admit i like the design I have but not really intrested in any awards. I am new to web development and the only reason I am creating the website is because I wanted a web presence.

Again, I have created all the CSS and HTML by myself using also some on-line tutorials. The only thing I see as a problem is the colour scheme and some images.

dd

Hi

i have a content div inside a container div, the content in the content div stretches automatically but the container div doesnt stretch to accomodate the bigger content div....is it possible to get it to stretch the same as the content?

the only solution ifound was to fix the height and set the overflow to auto so that i get a scroll bar but that looks rubbish ;o(

cheers
Andy

I need some people to bounce ideas off of. I am having a real hard time coming up with a layout that is accessible and fits my layout.

The form is very simple with two radio buttons and a text field. What I want is for the two radio buttons to display as a block but fit in a tight spot and the text field to float to the right and center if the two radio buttons. Here is a quick photochop of what I am going for.

gary.webb.waptug.org/projects/epls/




Here is a link to the code I am building.

gary.webb.waptug.org/projects/epls/images/search.gif

Notice in the image that I have modified the banner a bit to fit the search form into the bottom dark blue bar.


Thanks in advance.

Fixed.

I'm working on a video blog right now and I REALLY like the way this is set up.

See Gary Vaynerchuk WineLibrary(dot)TV videos

On Gary's videos there are always the Share Links above the video. These aren't part of the player but somehow built into the post template I imagine.

I also imagine aside from the css/html aspect this task of creating the links is being automated but I could be wrong.

Anyone have any ideas on how I could accomplish something similar?

Thanks

I have a weird problem. I've applied opacity in my stylesheet for a few elements. My opacity is working fine in FF, but not in IE.

Here's the code I have:
filter: alpha(opacity=75); -moz-opacity:0.75; opacity:.75;

I've also applied it inline as well as in the stylesheet.

Page is located at:
ebonyevans.coastaldistribution.com/index.php

The top center and top left music player should be opaque.

Anyoen see what I'm doing wrong?

Can someone explain me how to set on a photo-background ( opacity 100% 640x480 ) a square of 320x320 as size and opacity @ 25% and on that square i have to put some text that is at 100% opacity.


The problem is that when i set 100% opacity for the text... it gives me 100% of the 20% opacity... i need to get the full 100% of 100% opacity... can someone explain me ?

And another question... how can i set an opacity for Opera Browsers ?

I've set the main div content for opacity like this

#content-main {
margin-right:1%;
margin-top:0;
margin-bottom:2%;
width:58%;
background-color:#ffffff;
filter:alpha(opacity=70);
opacity:0.7;
}

but when I put an image in the div it acquires the opacity, and I want it to have none. I've tried to give it a style of opacity:1 and it didn't help. I tried alterting the image z-index to greater than 1 and it didn't help. How do I get the image not to acquire the opacity of the div?

Thanks

hi, ive been messing with opacity and want to know if i can achieve this.

I would like to have a background image on my page, then lay some divs over it. I want the image to be full opacity around the divs and be faded in the divs.

so i thought i'd add a class to the divs:
.opaq {
filter: alpha(opacity=50);
opacity: 50%;
-moz-opacity:0.5;
}

but the div inside with my content inherits the opacity and therefore is faded too

is there a way of having the opacity on the background of the div yet have the content 'full'

wat about z-index? to bring the content to the front

heres a pic:

I am trying to make the background transperency.. but the text on it should be bright and visible.. but i am not able to make the text brighter

opacity:0.25;
-moz-opacity:0.25;
filter:alpha(opacity=25);



u can look at the menu bar here

http://www.harshamv.com/test/

I have opacity set for a column <td> but I only want the background image to be 50% opaque, not the text too. I tried the following...

<td style="filter:alpha(opacity=50);">
<span style="filter:alpha(opacity=100);">
Text here...</span></td>


Is there a reason why the 2nd style="filter:alpha()" has no effect on the text what so ever? The image is already transparent, I exported it as a PNG file with transparency allowed or what not.

I was wondering if anyone knows a way to have use Opacity witin a div tab but then have another div tag in side of it not affected by Opactiy.

Here is the code i have I want background to be transparent but not transbox. But setting the opacity to 100 in transbox wont over ride background.:

Code:

<html>
<head>
<style type="text/css">
div.background
  {
  width: 500px;
  height: 250px;
  background-color: 000000;
  border: 2px solid black;
  opacity:0.6;
  }
div.transbox
  {
  width: 400px;
  height: 180px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity:0.100;
  }
div.transbox p
  {
  margin: 30px 40px;
  font-weight: bold;
  color: #000000;
  }
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>