S@m
-
Posts
299 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by S@m
-
IE is sooooooooo awesome like that. I would strongly suggest using a conditional comment like this: <!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen, projection" href="style_IE.css" /><![endif]--> That will pick up IE version 6 and below. You will need to create another style sheet for IE. That way you can make whatever settings that work for Firefox and leave them alone. Then adjust the settings so the page renders correctly in IE.As soon as IE 7 becomes more popular, you will probably have to create another style sheet just for IE7.PUT YOUR HANDS TOGETHER FOR MICROSOFT EVERYONE!!!
-
As I am sure you have already come across, you will get different results depending on what you use.position:absolute -- (Per W3C) With a value of "absolute" the element can be placed anywhere on a page. The element's position is specified with the "left", "top", "right", and "bottom" properties.Meaning, that you can set the exact location of an item on the screen by giving it the top and left coordinates.So: position:absolute;top:20px;left:30px; will put an object 20px from the top and 30px from the left of the screen.-----------------position:relative -- (Per W3C) Moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position.Meaning, that wherever the object is on the screen, it will get moved relative to wherever it already is.So: position:relative;top:20px;left:30px; will put an object on the screen 20px from the top and 30px from the left of its CURRENT position.------------------For padding and margin, lets say you have 3 boxes. You want to make sure the boxes are 10px apart from each other. That is your margin. It is the space outside of the object.Now that you have your 10px margin around your boxes, lets say you want the objects inside your box to stay 5px away from the edge of the inside of the box. That is your padding.Funky explanation(s) hope this helps!
-
It would just be: <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen, projection" href="/css/style_IE7.css" /><![endif]-->
-
Honestly, I wouldn't worry about it. If you don't specify a background color for your a: elements, who cares? :)I mean, unless you WANT to have a specific color appear on rollovers or something, it will be transparent. So, what's the point?...but that's just my thought.
-
Well, 100% is 100%, so it's going to fill the page no matter how much stuff you have.This will work for both IE and FF, I'm not exactly sure it is the proper way, but I have had good luck in the past. <!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"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">* {margin:0;padding:0;}body,html {height:100%;}#wrapper {height:100%;background-color:#00ccff;}</style></head><body><div id="wrapper"> </div></body></html>
-
For as long as I can remember, I have always said to people here use a conditional comment for your style sheets. I don't think that too many people wanted to do that. Luckily when I was informed about this, I thought it might be a good idea to try.As you just found, what a beauty that is to have now huh?! :)Here is what I have on all of my pages: <link rel="stylesheet" type="text/css" media="screen, projection" href="/css/style.css" /><!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen, projection" href="/css/style_IE.css" /><![endif]--> The lte IE 6 will detect v6 and earlier.Then, as you stated, just make another "if" statement to detect for v7. Problems solved.
-
Well, I'm not sure if this will work or not.Here is your css: <div id="portpic"><ul><li><a href="http://www.albertbell.com"><img alt="Albert Bell" id="image24" src="http://www.jpconcepts.net/wp/wp-content/uploads/2006/10/abell.jpg" /></a></li><li><a href="http://www.acutekservices.com/"><img id="image26" alt="Acutek Services" src="http://www.jpconcepts.net/wp/wp-content/uploads/2006/10/acutek.jpg" /></a></li><li><a href="http://www.aromech.com/"><img id="image27" alt="Aromech" src="http://www.jpconcepts.net/wp/wp-content/uploads/2006/10/aromech.jpg" /></a></li><li><a href="http://www.balancedblade.net/"><img id="image28" alt="Balanced Blade" src="http://www.jpconcepts.net/wp/wp-content/uploads/2006/10/bblade.jpg" /></a></li><li><a href="http://www.saugatuckmusic.org/"><img alt="Chamber Music Festival of Saugatuck" id="image29" src="http://www.jpconcepts.net/wp/wp-content/uploads/2006/10/cmfos.jpg" /></a></li><li><a href="http://www.johnsonsroofingllc.com/"><img id="image30" alt="Johnsons Roofing LLC" src="http://www.jpconcepts.net/wp/wp-content/uploads/2006/10/johnsonsroofing.jpg" /></a></li><li><a href="http://home.filertel.com/%7Edonlp/"><img alt="Don Peters: Amsoil Dealer" id="image31" src="http://www.jpconcepts.net/wp/wp-content/uploads/2006/10/amsoil.jpg" /></a></li><li><a href="http://www.premierdetailing.net/"><img id="image32" alt="Premier Auto & RV Detailing" src="http://www.jpconcepts.net/wp/wp-content/uploads/2006/10/premier.jpg" /></a></li><li><a href="http://www.westmichiganmoms.net/"><img id="image33" alt="West Michigan Moms" src="http://www.jpconcepts.net/wp/wp-content/uploads/2006/10/wmmjpg.jpg" /></a></li></ul></div> CSS: #portpic ul {list-style-type:none;}#portpic ul li {padding-top:1-px;}#portpic a {border:5px solid #ccc;}#portpic a:hover {border:5px solid #993300;} You might want to check that over, I'm not sure If I have everything correct there. I also changed the class to an id. Depending if you need another instance of it, you will need to keep it a class. Things like that can really help to lighten up your pages. Hope this helps!*edit*You can do hover(s) but you will need to use JavaScript. I can help you out with that if the "a:hover" doesn't work out.
-
Same here
-
Do you have a link so we can see what is happening?
-
http://www.mezzoblue.com/tests/centered-css/Hope this helps!
-
depending on what you want to do with hover, IE may not pick it up.however, you could try setting a different "line-height".a link {line-height:3px;}a:hover {line-height:30px;}
-
a img, a:link img {border: none;text-decoration: none;}
-
Not bad!I'm not sure about the background image either. It seems too much like a badly compressed gif image or something.However, if that is the style you are after, who am I to say it looks bad. :)As far as your IE problem, I would use a conditional comment to add a style sheet for IE only.Put this under your style sheet link: <!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen, projection" href="style_IE.css" /><![endif]--> That will check for IE browsers v6 and blelow. Then it will display that style sheet for IE only. That way you can change whatever settings you want so it displays correclty in IE without fear you will mess up your pages in every other browser.Good luck!
-
Here is a 3 column layout for ya.http://blog.html.it/layoutgala/LayoutGala07.htmlHope it helps!
-
I would use conditional comment and get a style sheet just for IE <!--[if IE]><link rel="stylesheet" type="text/css" media="screen" href="style_IE.css" /><![endif]--> Then just adjust the settings until it works.I'm not sure why you have <center> in there since your wrap div is margin:0 auto; that should set it up for you.
-
Give this a try. This is pretty quick and rough. I haven't tested it in any browsers, so results may vary. <!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"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">body, html {background-color:#000;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#fff;}* {margin:0;padding:0;}#buttonlist {margin-top:10px;}#buttonlist ul {list-style-type:none;}#buttonlist ul li a {position:relative;top:-20px;line-height:50px;font-weight:bold;color:#fff;background-color:#ff0000;border-top:5px solid #800000;border-bottom:5px solid #800000;padding:14px 50px 14px 50px;text-decoration:none;}#buttonlist ul li a:hover {text-decoration:underline;}</style></head><body><div id="buttonlist"><ul> <li><img src="red_left.gif" alt=""/><a href="" rel="" title="Link 1">Link 1</a><img src="red_right.gif" alt=""/></li> <li><img src="red_left.gif" alt=""/><a href="" rel="" title="Link 2">Link 2</a><img src="red_right.gif" alt=""/></li> <li><img src="red_left.gif" alt=""/><a href="" rel="" title="Link 3">Link 3</a><img src="red_right.gif" alt=""/></li> <li><img src="red_left.gif" alt=""/><a href="" rel="" title="Link 4">Link 4</a><img src="red_right.gif" alt=""/></li></ul></div></body></html>
-
You need to create an actual form.The test.html file only places images in a table.This will show you how to create a good css driven form:http://www.websiteoptimization.com/speed/tweak/forms/It will also show you how you can change the look of your input fileds.Hope this helps!
-
Well, as BiteMe said, your layout is just a bunch of images really. There isn't a whole lot you can do with just images.You need to put your page together first.You can use css to change the appearance of the input field for your search box. But, you need to set the page up with the correct elements before you can do that.You will need to use Dreamweaver, GoLive or notepad or something to get your page set up. ImageReady won't be able to do that.Sorry for the bad news!
-
I don't think I understand.If you didn't create the site, you won't be able to change to "your" style sheet.Unless you are talking about myspace or something where you can customize your page.
-
My skills are pretty rusty, but maybe something like this? <script language=javascript>function hide() { var id1 = document.getElementById('abc'); id1.style.display = 'none';}</script><table><tr><td> <div id="abc"> Hello </div> <form> <input type=submit value=hide onclick=java script:hide()> </form></td></tr> </table>
-
wow. Helps to have fresh eyes look at it I guess...now I feel like an idiot. :)Thanks for your help!
-
LINKAGEI am trying to improve my weak JS skills, so I going through a bunch of old tutorials. While I am learning, I wanted to try and pre-populate the input fields. Which works...everything works just like I want it to.However, when you submit, I get another alert box with the input name. I don't know why.Could someone point out where my extra alert is?Thank you for your time!
-
Well, I'm not sure if you are just shortening the code for us or not, but don't forget to put "div" in there.So:HTML- <html><title>Digipix</title><head><link rel="stylesheet" type="text/css" href="index.css" /></head><body><div id="critterLink"><a href = "Critters/page_one.html"><img src = "B_CRITTER_LINK.jpg"/></a></div><div id="floralLink"><a href = ""><img src = "C_FLORALAND_LINK.jpg" /></a></div><div id="farOutLink"><a href = ""><img src = "B_FAROUT_LINK.jpg" /></a></div></body></html> CSS- body { background-image: url("A-HOMEPAGE.jpg"); background-repeat: no-repeat; }#critterLink{ position:absolute; left:1px; top:350px; }#floralLink{ position:absolute; left:750px; top:325px; }#farOutLink{ position:absolute; left:570px; top:150px; } Try that and see what happens.I'll bust on IE any chance I get, so don't take my attacks at IE seriously.
-
IE is a pile of crap, so you need to create another style sheet for IE and just mess around with your numbers until it displays correctly.Use a conditional comment to tell IE what style sheet to use along with your other style sheet. <!--[if IE]><link rel="stylesheet" type="text/css" media="all" href="style_IE.css" /><![endif]-->
-
I would use a list to do that.Then you can control the spacing between the li's pretty easy.Here is a great resource for lists:http://css.maxdesign.com.au/IE will toss extra padding in the list elements though, so I would create 2 style sheets. 1 for IE and 1 for everyone else. Use conditional commenting to tell IE what to do. <!--[if IE]><link rel="stylesheet" type="text/css" media="all" href="style_IE.css" /><![endif]-->
