dbrimlow
-
Posts
712 -
Joined
-
Last visited
Never
Everything posted by dbrimlow
-
Close your body and html tags! </body> </html> A fairly good beginners css book is "integrated html and CSS" By Virginia DeBolt It will help you with the basics at first. DON'T get into advanced stuff until you have this down. A great tutorials link for beginners to understand general concepts (that I still go back to after all these years) is http://css.maxdesign.com.au/selectutorial/
-
Oh man. This is a mess. No wonder it hasn't been working. You need to immediately fix a few very simple code errors. 1. doctype, 2. close list elements 3. close html and body 4. if you can loose the frame. First, you need to get out of using "quirks mode" and declare a proper doctype! Use transitional for now: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <title>//M-Tech Development</title> <link rel=stylesheet href="styles/default/mtech.css"> </head> <body> < Second, you need to use proper html structure. That includes closing your list tags </li> ... example: you have this: <ul align='left'> <li class="navtop">Main Navigation <li class='navlink'><a href="index.php">Index</a> <li class="navlink"><a href="news/news.php">News Archives</a> <li class="navlink"><a href="support.php">Tech Support</a> <li class="navlink"><a href="feedback.php">Site Feedback</a> <li class="navtop">Tutorials change it to: <ul align='left'> <li class="navtop">Main Navigation</li> <li class='navlink'><a href="index.php">Index</a></li> <li class="navlink"><a href="news/news.php">News Archives</a></li> <li class="navlink"><a href="support.php">Tech Support</a></li> <li class="navlink"><a href="feedback.php">Site Feedback</a></li> <li class="navtop">Tutorials</li> etc, ... </ul> Also, it is a good idea to get used to always using lower case tags (for when you transition to xhtml) So your <HTML> should become <html> Lastly, close your document tags! </body> tag and </html> tag. If you can, get rid of putting the google ads in a (GAK!) frame! You may see an immediate difference once you fix these few items. You've been driving yourself nuts working on the css, but it wouldn't work right anyway so long as the actual code was bad.
-
There is a cool php custom "function" I found on the php.net site. It is kind of an UBER-htmlentities <?php // Convert str to UTF-8 (if not already), then convert that to HTML named entities. // and numbered references. Compare to native htmlentities() function. // Unlike that function, this will skip any already existing entities in the string. // mb_convert_encoding() doesn't encode ampersands, so use makeAmpersandEntities to convert those. // mb_convert_encoding() won't usually convert to illegal numbered entities (128-159) unless // there's a charset discrepancy, but just in case, correct them with correctIllegalEntities. function makeSafeEntities($str, $convertTags = 0, $encoding = "") { if (is_array($arrOutput = $str)) { foreach (array_keys($arrOutput) as $key) $arrOutput[$key] = makeSafeEntities($arrOutput[$key],$encoding); return $arrOutput; } else if (!empty($str)) { $str = makeUTF8($str,$encoding); $str = mb_convert_encoding($str,"HTML-ENTITIES","UTF-8"); $str = makeAmpersandEntities($str); if ($convertTags) $str = makeTagEntities($str); $str = correctIllegalEntities($str); return $str; } } // Convert str to UTF-8 (if not already), then convert to HTML numbered decimal entities. // If selected, it first converts any illegal chars to safe named (and numbered) entities // as in makeSafeEntities(). Unlike mb_convert_encoding(), mb_encode_numericentity() will // NOT skip any already existing entities in the string, so use a regex to skip them. function makeAllEntities($str, $useNamedEntities = 0, $encoding = "") { if (is_array($str)) { foreach ($str as $s) $arrOutput[] = makeAllEntities($s,$encoding); return $arrOutput; } else if (!empty($str)) { $str = makeUTF8($str,$encoding); if ($useNamedEntities) $str = mb_convert_encoding($str,"HTML-ENTITIES","UTF-8"); $str = makeTagEntities($str,$useNamedEntities); // Fix backslashes so they don't screw up following mb_ereg_replace // Single quotes are fixed by makeTagEntities() above $str = mb_ereg_replace('\\\\',"\", $str); mb_regex_encoding("UTF-8"); $str = mb_ereg_replace("(?>(&(?:[a-z]{0,4}\w{2,3};|#\d{2,5}))|(\S+?)", "'\\1'.mb_encode_numericentity('\\2',array(0x0,0x2FFFF,0,0xFFFF),'UTF-8')", $str, "ime"); $str = correctIllegalEntities($str); return $str; } } // Convert common characters to named or numbered entities function makeTagEntities($str, $useNamedEntities = 1) { // Note that we should use ' for the single quote, but IE doesn't like it $arrReplace = $useNamedEntities ? array(''','"','<','>') : array(''','"','<','>'); return str_replace(array("'",'"','<','>'), $arrReplace, $str); } // Convert ampersands to named or numbered entities. // Use regex to skip any that might be part of existing entities. function makeAmpersandEntities($str, $useNamedEntities = 1) { return preg_replace("/&(?![A-Za-z]{0,4}\w{2,3};|#[0-9]{2,5};)/m", $useNamedEntities ? "&" : "&", $str); } // Convert illegal HTML numbered entities in the range 128 - 159 to legal couterparts function correctIllegalEntities($str) { $chars = array( 128 => '€', 130 => '‚', 131 => 'ƒ', 132 => '„', 133 => '…', 134 => '†', 135 => '‡', 136 => 'ˆ', 137 => '‰', 138 => 'Š', 139 => '‹', 140 => 'Œ', 142 => 'Ž', 145 => '‘', 146 => '’', 147 => '“', 148 => '”', 149 => '•', 150 => '–', 151 => '—', 152 => '˜', 153 => '™', 154 => 'š', 155 => '›', 156 => 'œ', 158 => 'ž', 159 => 'Ÿ'); foreach (array_keys($chars) as $num) $str = str_replace("&#".$num.";", $chars[$num], $str); return $str; } // Compare to native utf8_encode function, which will re-encode text that is already UTF-8 function makeUTF8($str,$encoding = "") { if (!empty($str)) { if (empty($encoding) && isUTF8($str)) $encoding = "UTF-8"; if (empty($encoding)) $encoding = mb_detect_encoding($str,'UTF-8, ISO-8859-1'); if (empty($encoding)) $encoding = "ISO-8859-1"; // if charset can't be detected, default to ISO-8859-1 return $encoding == "UTF-8" ? $str : @mb_convert_encoding($str,"UTF-8",$encoding); } } // Much simpler UTF-8-ness checker using a regular expression created by the W3C: // Returns true if $string is valid UTF-8 and false otherwise. // From http://w3.org/International/questions/qa-forms-utf-8.html function isUTF8($str) { return preg_match('%^(?: [\x09\x0A\x0D\x20-\x7E] // ASCII | [\xC2-\xDF][\x80-\xBF] // non-overlong 2-byte | \xE0[\xA0-\xBF][\x80-\xBF] // excluding overlongs | [\xE1-\xEC\xEE\xEF][\x80-\xBF]{2} // straight 3-byte | \xED[\x80-\x9F][\x80-\xBF] // excluding surrogates | \xF0[\x90-\xBF][\x80-\xBF]{2} // planes 1-3 | [\xF1-\xF3][\x80-\xBF]{3} // planes 4-15 | \xF4[\x80-\x8F][\x80-\xBF]{2} // plane 16 )*$%xs', $str); } ?> businessman332211 had the right idea by having you run the upload file through htmlentities. But, instead, run it through the above makeSafeEntities function -- it was created to catch most of the holes in the native php htmlentities function.
-
I agree that this should not digress to a fixed vs liquid thread (also, my bad for not noticing the "fixes" - should have known better ) so I will just respond to your question about the IE "expression". Instead of using JS, try using IE expressions. An expression (as some of you know) is Microsoft’s proprietary CSS extension. Since it is invalid css, put them in an "ie_only.css" files and only call them via an IE conditional comment. Here is the example Roger used on his site. Consider this simple 2 col liquid layout. It will auto ... <head> ... <link rel="stylesheet" type="text/css" href="/css/main.css" media="screen"> <!--[if lt IE 8]> <link rel="stylesheet" type="text/css" href="/css/ie_only.css" media="screen"> <![endif]--> </head> <body> 1. <div id="wrap"> 2. <div id="main"></div> 3. <div id="sidebar"></div> 4. </div> 5. </body> ... The standard css in file "main.css": #wrap { margin:0 auto; max-width:70em; } #main { float:left; width:59%; margin:0 0 0 4%; } #sidebar { float:right; width:29%; margin:0 2% 0 0; } To avoid readability problems for people who like to make their browser windows very wide, since lines of text become too long to read comfortably, he used the max-width CSS property to specify how wide the #wrap element can become. He could have used pixels to define a maximum width for the layout, but that would have made line lengths increase as text size is reduced and decrease as text is made larger. He wanted line length to be comfortable for reading and stay roughly the same regardless of text size. By using em instead of px as the unit for max-width, the width will depend on font size and line length will be similar no matter what size the text is. Now, the "expression" used in a new "ie_only.css". He added the "display:inline" to take care of the evil "IE doubled float-margin bug". #wrap { width:expression(document.body.clientWidth > 900? "900px" : "auto"); } #main { display:inline; } #sidebar { display:inline; } "The #wrap rule makes the width of #wrap flexible until the browser window is wider than 900px, at which point the width of #wrap is fixed at 900px. Unfortunately for IE users, this will not make the width elastic, just fluid with a maximum width. Not as neat as in modern browsers, but better than nothing." I tried it once on a site I was working on and it worked beautifully. It is on my huge "to do" list to learn these stupid expressions and use conditional comments more. I have a feeling in order to save older layouts that used hacks, IE 7 is going to require it. Dave
-
WHOOPS! Correct. This: html { background-image: #FFFFFF url(http://www.runnerselite.com/images/linedown.jpg; background-repeat: repeat-y; background-position:0px 155px} body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; } body { background-image: transparent url(http://www.runnerselite.com/images/line.jpg; background-repeat: repeat-y; background-position:15px 0px } should be changed to shorthand (drop the "image", "repeat" and "position") using just "background": html { background: #FFFFFF url(http://www.runnerselite.com/images/linedown.jpg) repeat-y 15px 0px; } body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; } body { background: transparent url(http://www.runnerselite.com/images/line.jpg) repeat-y 15px 0px; }
-
LOL! I don't mean to be contrary with Obsidian all the time. (I respect your skill and advice). But, max-width is not supported by IE. For IE you should use expressions. A great article on fixed vs. fluid by an extremely talented css expert : http://www.456bereastreet.com/archive/200504/about_fluid_and_fixed_width_layouts/
-
I agree to a large extent. But there are indeed gotchas out there for any level or expertise. While I have many layouts that are tried and true, every now and then a client wants an element added that can suddenly and inexplicably blow up the layout. It may take me less time to realize why, than it does a newbie, but it happens. Creating multi-column layouts is relatively old hat for those of us working daily, but the real trick is to keep them sane when the content of one column suddenly also needs to have multi-"cell" like display. Granted, I have STILL not even seen IE7, and can't put off looking at my sites in it much longer (only so long one can avoid the inevitable). P.S. Yeah, ashamed to confess that sometimes, on a real tough dynamic "product features display", I just toss up my hands and slap on a quick table.
-
You are leaving your url open. background-image: #FFFFFF url(http://www.runnerselite.com/images/linedown.jpg; should be background-image: #FFFFFF url(http://www.runnerselite.com/images/linedown.jpg);
-
And forget about IE 5.x (PC and Mac) and 5.5 pc. Until my stats show under 1,000 monthly unique visits from these browsers, I stay away from absolute positioning. The reality is that most people online are used to long scrolled content, these days. In the '90s we used a left nav frame. From 2001 to 2003, we got rid of the evil frames and limited our content to 600px from the window-top and have a "more -->" or a "continued -->" link to another page (this was way too "heavy" though. Now we live with scrolling and add "back to top" every 400px or so. There is a function - "position:fixed" - that does not work in various IEs. Many Microsoft haters, though, have waste.. um, I mean ... spent considerable amount of time and effort to get IE to emulate it with hacks and other creative IE jousting. If you Google position:fixed, you can wade through them and perhaps find one you are comfortable with. For me, though ... I'm tired. I don't try to champion the good fight against IEs anymore. I just try to code carefully.
-
Thanks, tarun. I always forget to check AOL.
-
I too had an initial wait of @ 8 to 9 seconds or so before anything loaded (Firefox). But, again, the usual rules aren't as strict with an entertainment site. I would recommend having something quick and fixed display while the loading is going on. People with dial-up or slow dsl will be waiting with nothing to do for an uncomfortably long time. You should give them something to read or look at.
-
I created the gif to cycle through just once. It may be that since Mcafee internet security is slowing down web pages (performing goodness knows what scans and checks) that the gif cycles in the background while loading.
-
In Firefox 2.0.1? I know it works in IE6.0. But since upgrading FF to 2.0.1 it doesn't (but I also upgraded my Mcafee Security Center and that puppy has caused some strange slowdowns on my laptop).
-
sorry, forgot the link (where did the "modify" button go? http://www.bluesmandeluxe.com/ae/
-
Cool. I signed up for the mailing list (mostly so I can see when the site is finished and help you to check the functioning of it). Dave
-
You make a few common but critical newbie mistakes. These are mostly thanks to Microsofts' evil influences and IE's displaying of garbage code. First (and most important) use a proper DOCTYPE and charset. If you use a proper doctype, even IE will somewhat behave and follow most web standards. Second get used to coding in all lower case. Eventually xhtml and xml will be the norm, so you may as well get used to those rules. Third use containers for your most important layout ids "divs" - starting with a container for all of your markup within the body tag. A quick recoding (@ 5 minutes) and the following is a relatively "fluid" or "flexible" webpage. This will resize the containers and fonts proportionally as the browser window shrinks: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Shane's Home Server</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- body { background-color: #000000; font-family:Arial, Helvetica, sans-serif; font-size:100%; width:96.8%; margin:0 auto; } a:link, a:visited {color:#0000FF} a:hover {color:#66CCFF} #container { font-size:1em; width:80%; margin:0 auto; text-align:center; } .Music { margin-top: 65px; margin-right:auto; margin-left: auto; width: 80%; height: auto; background-color: #989898; border: 1px solid #66CCFF } h1 { font-family:Verdana, Arial, Helvetica, sans-serif;font-size:1.5em;color: #FFFFFF} .pageTitle {color:#D0D0D0; font-size:1.1em} .formfield {border: 1px solid #66CCFF; background-color:#CCCCCC; color:#333333} --> </style> </head> <body> <div id="container"> <h1>Welcome to Shane's Home Server</h1> <div class="Music"> <form action="Music_Upload.php" method="post" enctype="multipart/form-data"> <h2>~~~~Music~~~~</h2> <p><a href="Files/Music/">-View music-</a></p> <p>Upload Music - Song</p> <input name="file" type="file" class="formfield"> <br /><br /> <input type="submit" name="submit" value="Upload"> </form> <!-- close Music --></div> <!-- close container --></div> </body> </html> Cheers. Dave
-
LOL ... actually (not to beat a dead horse; it looks fine as is with the Ibanez) but redbullmarky is correct - a LesPaul (the "second pic") is more recognizable as a "rock" guitar. Few country music guitarists use LPs, they tend more towards Fender Telecasters and Strats. But I like the new splash anyway and am looking forward to seeing the finished site. You can get away with using Flash on entertainment/artist sites, too. A decent, cheap, quick and easy flash intro page program is trendy flash (http://www.trendyflash.com/). (here's an example I made for a guitarist friend two years ago - http://bwmac-recording.com/intro/intro/ ) Dave
-
It would help to see the rest of the css. If you are using all "absolute" positioning, then there is no telling what your box is in relation to and how changing it will affect the whole layout.
-
For some reason, my animated gif background image stopped working in FF (2.0.1). Interestingly enough, I can't find any css info on "background animated gifs". When I view "tools/page info/media/http://bluesmandeluxe.com/ae/085/eyea.gif" it animates just fine. This site was a challenge in the first place and I didn't want to put the gif in the markup (although I have a feeling that's the recourse here). I HATE that it works in IE. Anyone familiar with the rule regarding background animated gifs?
-
Absolutely #3. If you want to get away from a "country" feel, go with "Rock" guitar. An Ibanez SAZ720 is a good choice: http://i49.photobucket.com/albums/f267/aliengirl73/276518.jpg, or a LesPaul: http://www.hickies.co.uk/shop/images/GIBSON%20LES%20PAUL%20STD%20HONEYBURST.jpg (I use both)
-
Very nice and clean. Don't worry about the tables. Your markup is so clean it can stay as it is. The site looks superb and would, however, translate well into pure table-less layout. But it wouldn't hurt to leave it. However ... use a doctype! and a proper charset - I recommend that you use: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> since your using xhtml closing tags.
-
The concept is great, (particularly as a quick temp page). As a musician myself, I personally would prefer seeing two amps instead of two speakers. Speakers seem a little "cheesy" and rinky dink for a performer. Also, does she use a Fender "Fat Strat"? Is that hers in the picture? Performers are funny about their gear. It will not matter if she is just a singer. But if she plays guitar and you choose the wrong kind ... You are lucky doing a musician's site. You are relatively much freer of any design and layout constraints as you are with a business site. On entertainment sites, people are much more forgiving about page weight and load times. (LOL, this is why I still haven't gotten around to doing my own personal music site ... so used to business coding that I blank out when set free). Have fun with this project. If you need it, there are some cool, free mp3-flash and .flv players available at www.jeroenwijering.com.
-
Listen to jcombs. Take a look at his website to see exactly how a perfect, valid and suberbly coded and crafted website is done!
-
[quote]My CSS was invalid and displayed perfectly fine in IE7 and looked terrible in firefox and ie6. [/quote] Axiss ... BAD css and outright BAD markup code will work in almost any version of IE. Of course, it works only in IE. The whole POINT of usings web standards is so properly coded, valid css and html/xhtml markup works in all browsers. IE will not work with well crafted css and proper markup ... because they want the world to only use IE. Period. [quote](Now valid it still is messed up in firefox)[/quote] If your css and markup is truely valid, it is working fine in FF ... don't blame the browser ... blame how you told the valid code display the layout. (I'm not trying to be insulting, believe me, getting valid css and code to do what you want requires a lot of rules. If something isn't working ... 9 out of 10 times you've broken a rule.) Anyone can write perfectly valid code that looks perfectly awful ... the trick is writing the valid code to display EXACTLY what you want. I clicked on the website you show in your profile. If that is the site you are talking about ... it will never be valid ... you are not using any DOCTYPE. This page is 100% designed for IE only. Although, it is well crafted enough to hold up pretty well in FF.
-
I haven't looked at any of my sites in IE 7 yet ... because I'm scared to death at what it is doing to them. But here is a link to the original auther of the "holly Hack". These people know how to deal with all versions of IE (including 7) http://www.positioniseverything.net/