Outset Border Code
newbie
Posted: Thu, 2008-07-24 09:44
Hello all. I was hoping someone could answer what is hopefully a simple problem and provide and equally simple solution but anything will be appreciated!
The problem: I have created a border in a stylesheet (already tested and no issues there)
code:
table.outset {
border-width: 8px;
border-style: outset;
border-color: #c94066 #c94066 #A9A9A9 #A9A9A9;
}
called in the body of the code by: <table class="outset" ......>
Now, this renders perfectly in IE (at least 7) but fails in Firefox and Safari. It appears that in FF and Safari these browsers completely disregard the chosen colors and outset style (FF and Safari give a border with four solid and separate colors). IE does a great job but I would like to make this compatible with the rest. Is this even possible (i.e. coding issue)?
Or, does anyone have any other suggestions as to creating a 3D effect around a table in Dreamweaver CS3? I have searched for and used various codes offered on the web and nothing has worked as well as this simple outset property.
Any suggestions?!
Leader
Posts: 506
Joined: 2007-06-10
Location: Adelaide, Oz
Enter "outset border" (with
Posted: Thu, 2008-07-24 10:29
Enter "outset border" (with the quotes) in the SEARCH box at top right of this page then read the half dozen or so threads it pulls up - you will most likely find your question has already been answered.
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again
newbie
Posts: 9
Joined: 2008-07-24
outset border coding
Posted: Thu, 2008-07-24 11:50
hello all. now that i am on my personal computer i can send more detailed code. i would first like to start, however, with a simple request....if you don't have an answer for me please simply don't reply or reply with "i don't know the answer" rather than stating the obvious (i've already asked my walls for an answer and they were about as helpful). now...the problem remains the same. for some reason FF and Safari don't recognize the bit of code (no matter how i've modified it) while IE does...the full page code follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>Megan Roth</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
table.outset {
border-top-style: outset;
border-top-width: 8px;
border-top-color: #af234e;
border-right-style: outset;
border-right-width: 8px;
border-right-color: #af234e;
border-bottom-style: outset;
border-bottom-width: 8px;
border-bottom-color: #a9a9a9;
border-left-style: outset;
border-left-width: 8px;
border-left-color: #a9a9a9;
}
-->
</style>
</head>
<body bgcolor="#BD8F93">
<table width="750" height="500" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="750" height="52" align="center">Name</td>
</tr>
<tr>
<td width="750" height="40" align="center" id="navigation" class="navText"> menu<td>
</tr>
<tr>
<td>
<table class="outset" width="750" height="500" align="center" cellpadding="0" cellspacing="0" bgcolor="#f2ecb0">
<tr>
<td>
<table width="95%" height="106" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>content</td>
</tr>
</table> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
with all this being said, i should add that the code validates (with the exception of the "height=500" entries for some reason otherwise clear). i should also add that i got this idea from the usual website everyone recommends for CSS (the list apart or whatever it's called) and the site says this effect is cross browser compatible however i still have problems. any help would be greatly appreciated! i have searched through EVERYTHING i could possibly find for the past couple weeks and am now reaching out to anyone with a better knowledge. Thank you!
newbie
Posts: 9
Joined: 2008-07-24
updates
Posted: Fri, 2008-07-25 22:21
hello all...just hoping that someone will find this problem interesting and be willing to help. since the last posting i have begun conversion to a strict doctype from the transitional previously in use. the page validates error free. after combing through millions of google results and trying everything i find with the code, the following settings were tried:
/* #border {border-color: #af234e #a9a9a9; border-style: outset;} */ /* #border {border-style: outset outset outset outset; border-color: #a9a9a9 #a9a9a9 #af234e #af234e; border-width: thick;} */ /* EFFECTS 3 NAV BUTTONS...??? #border { border-left: 8px outset #a9a9a9; border-bottom: 8px outset #a9a9a9; border-right: 8px outset #af234e; border-top: 8px outset #af234e; } */ /* #border { border-top-style: outset; border-top-width: 8px; border-top-color: #a9a9a9; border-left-style: outset; border-left-width: 8px; border-left-color: #a9a9a9; border-bottom-style: outset; border-bottom-width: 8px; border-bottom-color: #af234e; border-right-style: outset; border-right-width: 8px; border-right-color: #af234e; } */ /* #border { border-top: #a9a9a9 8px outset; border-left: #a9a9a9 8px outset; border-bottom: #af234e 8px outset; border-right: #af234e 8px outset; } */ /* #border { border-width: 8px 8px 8px 8px; border-style: outset outset outset outset; border-color: #a9a9a9 #a9a9a9 #af234e #af234e; } */ /* #border { border-top: 8px outset #a9a9a9; border-left: 8px outset #a9a9a9; border-bottom: 8px outset #af234e; border-right: 8px outset #af234e; } */these have all been commented out for trial and error purposes. ironically, all codes reacted the same as previously described in broswer. IE...great. Firefox/Safari....horrible (ignores the code...only thing i noticed was that "border-collapse" actually forced a reaction in the two but not anything close to what i want).
now i realize this probably seems like a beginners problem and everyone is reluctant to help. i'd just like to say first i'm not an idiot, second i'm not new to programming, however, this is not one of the languages i know so it's probably a syntax issue. i would greatly appreciate any assistance in resolving this issue.
newbie
Posts: 9
Joined: 2008-07-24
page code
Posted: Fri, 2008-07-25 22:24
oh, and if interested the full page code (now severly truncated for the strict conversion) follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- DW6 --> <head> <title>Megan Roth</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <table width="791" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center">Name</td> </tr> <tr> <td align="center" id="navigation" class="navText"> <a href="home.html" class="style8">home</a> <a href="calendar.html" class="style8">calendar</a> <a href="resume.html" class="style8">resume</a> <a href="audio.html" class="style8">audio</a> <a href="images.html" class="style8">images</a> <a href="contact.php" class="style8">contact</a> </td> </tr> <tr> <td align="center"> <table width="750" cellpadding="0" cellspacing="0" id="border"> <tr> <td> <table width="95%" border="0" cellpadding="0" cellspacing="0"> <tr> <td>content</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>Leader
Posts: 506
Joined: 2007-06-10
Location: Adelaide, Oz
Quote:...if you don't have
Posted: Fri, 2008-07-25 22:50
I was actually slightly more helpful than your walls since I did the search and read the threads to confirm what I thought I remembered. I found the following information which I thought might help you decide whether to pursue this.
+ + + + + + +
Your border style is set to outdent? You mean outset?
I think the color will vary depending on the browser you're using. For example on a 10px outset border with the colors of the borders set to the way you have them...
IE 6 actually has two colors for each border to give it an "outset" look. The top border #191970 and #121254. Right and bottom borders #0C1919 and #193333. The left border #254C4C and #336666.
Firefox 1.0 just has one color for each border. Top border #BABAD4. Right and bottom border #1D3939. Left border #C1D1D1.
It may be different on other OSes, I didn't test that. Just checking two browsers on the same OS you can see that it's going to cause you problems if you want to pick colors depending on the colors that outset creates.
You may want to make your own border with an image program and use that. Make your own "outset" border and then use those colors. It might be the only way to do it and have it work across all browsers. That or skip using outset and go with something like solid, dashed, dotted, or any border style that doesn't change the color of your border.
Another search two minutes ago found these snippets...
However, you could, perhaps (if it is important enough) sit one div on top of another slighly bigger one and encase each with 3px borders of slighly different colours. Clumsy, but it should work.
+ + + + +
Although I do realise that it may be a requirement of your design, it is still worth noting that chasing after cross browser perfection is not considered a sensible game and one just has to except at times that there are differences and bugs that occur that make this impossible and that no one but us compares between two different browsers.
You simply can't do anything about miss-handling of borders; transparent, double or dotted, outset, inset etc one could go on and on listing all the problems.
But hey, whatever....your problem is no doubt original and you are no doubt right in that it probably is a syntax error.
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again
newbie
Posts: 9
Joined: 2008-07-24
thank you!!
Posted: Fri, 2008-07-25 23:08
Hey, thanks very much! I'm just stubborn about abandoning anything without confirmation that it's going to be ridiculous in terms of work. So, sorry about that, it's just a personal quirk.
Couple of simple coding questions for you if you would....
1. Was I calling the class right in the beginning?
Class...table.outset {properties} Table....<table class="outset" other properties>
2. Is there a good reference you could recommend for the syntax of XHTML Strict Type? (There were a couple of things that I coded easily with the Transitional but just need to find the proper way for the Strict to stay with it)
3. And lastly...since the outset thing isn't so good I'll give a short explanation of what I was originally trying to accomplish and then the question.
I was originally going for a 3D effect on the border. I read that earlier versions of the program that I am using (Dreamweaver) had this effect built in, but for some reason it was discontinued in the version I have (CS3 V9.0).
Could you recommend another way of accomplishing this ultimate goal or would you still go with the image creation you recommended before?
Thanks again. I do appreciate it!!!
Leader
Posts: 506
Joined: 2007-06-10
Location: Adelaide, Oz
1. This is the old and very
Posted: Sun, 2008-07-27 09:30
1. This is the old and very cumbersome method of specifying tables. It is simpler and cleaner to use CSS to style the content – see my current efforts on the BB – Burnt Bits. Click the link BB and view the source, all the content is styled in the CSS file.
You still have errors in that last code you posted http://validator.w3.org/check in that you don't appear to have closed the <head> tag.
2. I Googled "xhtml syntax" and got references from http://www.htmlgoodies.com/beyond/xml/article.php/3473511 and http://reference.sitepoint.com/html/html-xhtml-syntax I'm sure you could find one you like by the same method.
3. I didn't actually write any of the above quotes but, with my limited knowledge, if you really want to pursue a 3D border I'd try the first suggestion i.e.
"If you want to create a precise groove border, for example, you would require two nested divs with 1px borders, one with your chosen light color, and one with the dark. Anything else and you are at the mercy of the browser."
– and sit your table in the innermost one.
I know nothing about Dreamweaver and you will find little support for it on this forum where most of the helpers are hand coders who write from scratch so that they know there is no extraneous code inserted by the 'clever' DW. From discussions I've seen even those who might use it, for certain things they find handy, do not recommend using it in design mode. The other bit of advice often given is to write for FF then adjust for IE.
Disclaimer: I know next to nothing and could be talking through my hat!
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again
newbie
Posts: 9
Joined: 2008-07-24
Thanks!
Posted: Sun, 2008-07-27 17:49
Agreed! In the meantime I've been making a lot of sitewide changes based on arguments I've read on the web and in forums. Apparently, HTML Strict will be more liquid with the future than the XHTML I was working in. Then, the next task at least, will be to make it more of a CSS layout and get away from the table design there.
But, the border....I wonder.....
I've been looking at/working with the ridge style offered. It appears that all browsers can handle the effect (IE and FF produce the same effect) but for some reason the color I've chosen doesn't work across them. It appears that FF is slightly more "strict" with it's color choices i.e. using what I tell it, while IE for some reason is transposing it (I'm using a supposed silver but IE is turning it into a darker gray). Would it be possible/feasible to hardcode a conditional/solution for IE to force it to produce a more similar color without changing how it deals with the effect?
Leader
Posts: 506
Joined: 2007-06-10
Location: Adelaide, Oz
rothnd wrote:Apparently,
Posted: Sun, 2008-07-27 21:36
Yes, you're right - in the long term it's probably best to use HTML 4.0 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
It will cause less heartache and render things as you (more or less) expect. You will find good arguments/explanations in the "How To" forum on CSSCREATOR.
If it isn't tabular data, don't use tables for layout. Tables should only be used within a design, not for design.
No sorry, this is one mulberry bush I've been around personally -
Not a solution:
I tried picking up the darker tint on the right (IE) and using it as the border for FF thinking it would then throw the correct pink colour to the left, and I would have the colour I want in FF – however it all just turns a murky grey.
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again
Leader
Posts: 506
Joined: 2007-06-10
Location: Adelaide, Oz
PS - this is the basic
Posted: Sun, 2008-07-27 21:45
PS - this is the basic advice on Dreamweaver and please do look through the information in the How To forum - it may help you to sort out where to begin. The guys here also recommend htmldog for tutorials.
Please do not get embroiled in Dreamweaver or Frontpage. WYSIWYG editors do not write code, you do. DW has the habit of turning out dodgy code and of luring the user into a false sense of security.
You have the opportunity to learn the not-so-difficult art of hand coding, which will reap many benefits down the road. You will find your understanding of the structure of code and general advancement to be far quicker.
Use DW as an editor if you must, but steer clear of it's many oh-so-helpful facilities, such as preview modes and WYSIWYG modes - they lead to grief.
Only ever check your work in that which will be ultimately rendering said work, i/e a browser, preferably FF initially to confirm correct coding and then IE to see what adjustments need to be made.
- Hugo.
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again
newbie
Posts: 9
Joined: 2008-07-24
A New Direction....
Posted: Tue, 2008-07-29 05:21
Hey. I was wondering if you had any comments/suggestions/references (I'm lacking even with google searches on this one) for working with media in CSS. Specifically, I'd like a player (preferably quicktime but doesn't matter really) with a window which will contain a playlist of audio tracks and where a user can control which track to play and so on. The way I have it now is rudimentary but works (a small quicktime player for each song) but I'd really like to clean it up with one player and playlist control.....
Anything? Much appreciated for all your advice recently!!!
Leader
Posts: 506
Joined: 2007-06-10
Location: Adelaide, Oz
Sorry, this is where I run
Posted: Tue, 2008-07-29 11:53
Sorry, this is where I run out of ideas
I'm no use at all on media and can only suggest that you either post a new topic here (in the "Off Topic" forum) and see if someone else can help.
Alternatively, try a media forum - however it doesn't sound as though even Apple has much faith in Quicktime at the moment
http://www.apple.com/quicktime/tutorials/embed.html
You're welcome.
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again