10 replies [Last post]
florian
Offline
newbie
Last seen: 14 years 49 weeks ago
Joined: 2007-02-17
Posts: 6
Points: 0

I am looking to rebuild our site on top of a content management system, with only slight cosmetic changes. Naturally, the first step was to create a CSS template to replace the old table based design. I was also hoping to use transparent pngs for the rounded corners, so we would be able to change the colours, but IE has too many problems with png transparencies, so I had to default back to gifs. Sad.

Here is the old design:
http://fangohr.com

florian
Offline
newbie
Last seen: 14 years 49 weeks ago
Joined: 2007-02-17
Posts: 6
Points: 0

round corners

I was trying to get the links highlight backgrounds to have rounded corners, I was able to do this with Mozilla, with the help of -moz-border-radius. Does anybody know if there are similar settings for IE or Safari?

Thanks again,

FF

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 4 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Very nice work, site is more

Very nice work, site is more or less functionable without styles, which is a good thing Laughing out loud

However, your doctype is incomplete, and you're suffering from a bit of divitis.

florian wrote:
I was able to do this with Mozilla, with the help of -moz-border-radius. Does anybody know if there are similar settings for IE or Safari?

IE? Internet Explorer?

No. In fact you're lucky if you can get ANYTHING working properly in IE, stupid piece of cack that it is.

Rounded borders/corners are a long way off being an implemented standard.

http://www.css3.info/preview/rounded-border.html

Webkit and Firefox have proprietary code that works, or you could use multiple background images:

http://24ways.org/2006/rounded-corner-boxes-the-css3-way

but IE? That;s stuck n the stone age. Forget about IE, leave the niceties for decent browsers Smile

Verschwindende wrote:
  • CSS doesn't make pies

florian
Offline
newbie
Last seen: 14 years 49 weeks ago
Joined: 2007-02-17
Posts: 6
Points: 0

round corners, hover problem

Thanks Pineapplehead.

I developed this on a Mac (firefox/safari), when I thought it was complete I had a quick look at it on a PC in Internet Explorer and almost started crying: It's unbelievable how bad this piece of software is. Completely irresponsible of Microsoft to have everybody developing for the web jump through so many hoops. The best marketing campaign couldn't make up the damage they do here.

As far as rounded corners go, I was trying to use them for links, I have the content divs figured out. So is there a way to do something like Mozzila's x-rounded-radius in IE, Safari or Opera?
(The link you sent: Webkit radius being Safari?)

Also I have one problem with the logo, I can't seem to overwrite the yellow hover. Does anybody know a remedy for this?

Thanks again.

Florian

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

florian wrote:Thanks

florian wrote:
Thanks Pineapplehead.

Completely irresponsible of Microsoft to have everybody developing for the web jump through so many hoops. The best marketing campaign couldn't make up the damage they do here.

Here, here, and all for the sake of a few simple properties and support for a graphics standard that's been around for donkeys years.

My view is that all responsible web developers should, on each job, carefully note the time and effort spent working around the IE problems - having built the site working happily in modern browsers - and then deduct that time from ones clients invoice and instead raise a new invoice to send to Microsoft requesting prompt settlements for the work necessary to produce a functioning web site as rendered in their third rate browsers. if enough of us did that it would be hilarious.

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

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

Yellow hover? As for

Yellow hover?

As for rounded corners there are essentially two approaches, use javascript or use a pure CSS solution albeit with rather a lot of markup.

Two such examples that are quite good are:

Javascript:
http://curvycorners.net/

CSS:

http://www.spiffycorners.com/

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

florian
Offline
newbie
Last seen: 14 years 49 weeks ago
Joined: 2007-02-17
Posts: 6
Points: 0

Hugo wrote:Yellow hover?

Hugo wrote:
Yellow hover?

I meant the yellow background of the logo (it comes from the a background definition):
Not sure how to override it.

Hugo wrote:
As for rounded corners there are essentially two approaches, use javascript or use a pure CSS solution albeit with rather a lot of markup.

Two such examples that are quite good are:

Javascript:
http://curvycorners.net/
CSS:
http://www.spiffycorners.com/

Thank you! This is great, you have no idea how much time I spent looking for something like this. Google wasn't very helpful, because people are usually pleased to easily: I wanted a transparent, anti-aliased solution. Will try that out. I will definitely browse some of your sponsors. Oh, here is one for transparent salad dressing. Can't get enough of that stuff! Wink

FF

florian
Offline
newbie
Last seen: 14 years 49 weeks ago
Joined: 2007-02-17
Posts: 6
Points: 0

thepineapplehead wrote:Very

thepineapplehead wrote:
Very nice work, site is more or less functionable without styles, which is a good thing Laughing out loud

However, your doctype is incomplete,

This comes straight out of dreamweaver, and I know nothing about this subject matter.
What doc type would I want to use?

thepineapplehead wrote:

and you're suffering from a bit of divitis.

Too many divs? A div not closed?

Thanks,

FF

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

DW *sigh* DTD info is all

DW *sigh*

DTD info is all over the forum We'll leave you to track that down Smile

Can't see this yellow in either IE6 or FF.

By Divitis TPH is refering to overusing the div tag when it isn't required, it's a grouping tag used to group sets of elements or denote sections of the page, devide it up. many block level elements can quite easily be styled in the same way one would a div tag (which also is a non-semantic tag , it confers no semantic meaning of the content it may hold)

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

florian
Offline
newbie
Last seen: 14 years 49 weeks ago
Joined: 2007-02-17
Posts: 6
Points: 0

My apologies. I will read up

My apologies. I will read up on Doc types.

What do you use to edit CSS?

Thanks,

FF

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

florian wrote:My apologies.

florian wrote:
My apologies. I will read up on Doc types.

What do you use to edit CSS?

Thanks,

FF

Certainly not the Weaver of Lies Smile In fairness I hear it's a half decent code editor but avoid any of it's clever helper features especially things such as 'Code View'.

What do I use? any decent IDE and there are many very good ones available as OS (there's a thread on most of them somewhere 'Off Topic'? )

Main thing to understand with something like CSS is that it is not really suited to any sort of automation it is very much a manual style of coding (as it all is truthfully) and all you actually need is a plain text editor and a brain that can remember the properties.

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