|
CSS - Byte-order Mark Question
Hi again!
I'm concerned with a warning I keep receiving in the validator. I have a short page which is translated to 20+ western european languages. I need them all to display right so I used UTF-8 right? Using NOTEPAD - I took the english version and replaced the text with (for example Finnish). Then when i wanted to save it Notepad warned me to save it as unicode or I lose all the specific letters. I did save as UTF-8, but then I get this message when validating. (though I pass validation) "Byte-Order Mark found in UTF-8 File. The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported." What can I do ? Thanks Similar TutorialsHello all- I have news headlines set up to display in a list. Each headline starts and ends with a quote. When a given head wraps, the next line begins directly under the quote mark: "This is Headline 1" "This is Headline 2 and When It Wraps, the First Line Falls under the Quote Mark" Ideally, I'd like to have the initial quote mark in each head hang out from the text, so that wrapped lines in that list item align underneath the first letter, rather than the quote mark. Is it possible to use a character, i.e., the quote mark, as a list marker? Thanks in advance... - Tom Tedeschi Were in the middle of re-writing our tools and alowing our users (who put our tools in their website) much more controll over the css of the page. One of the things were touting is that the user can change the order of the fields in the forms to suit what ever is more important to them. While this may work well positionally , the tab orders are all f'd up. Is there any way to set these in CSS?.. All of the inputs and labels are each in their own divs with a unique ID. I'm thinking this isn't possible but I thought id ask is there a specific order in which to put the css selectors in a style sheet, eg a:link a:hover a:active a:visited my problem is that the hover state isn't activated for links i have already visited. thank you Hi So I am setting up a portfolio website and I have been focusing mainly on the highslide portion which I got working great (with this forums help, thank you!). Now I have gotten rid of all the tables and garbage like that and am trying to make the images the backgrounds so they will be locked but now the image links spill out of the column and don't line up anymore. this is what it SHOULD look like: http://kdpatton.com/index01.htm but this is what does look like: http://kdpatton.com/portfolio02.htm I can't figure out why. Any help would be great. Love this forum! Thanks for taking the time to read my question. Just wondering. Does the order of appearance of items in a CSS file impact how a page is displayed? I'm trying to make a page, and it works in IE, but not in Firefox. Thanks, Brad I'm having trouble with the CSS on this page: http://www.mediamogulsweb.com/... You'll notice that in IE the CSS drop down menu is partially hidden by the center graphic on the page...In FF, this is not a problem.... I'm almost entirely sure that this is a z-index issue, but I've checked the z-index, and everything seems fine....the drop down menu elements have a higher z-index than the center graphic elements, yet it still doesn;t work in IE... Any ideas why? Thanks. I have an absolutely positioned <div> that is intended to over some content directly below it. This content is contained within a relatively-positioned <div> which seems to be causing it to display in front of the absolutely-positioned <div> regardless of what the z-index is set to. Here is a simplified example of my problem: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stacking Order Test</title>
</head>
<body>
<div style="position:relative;">
<div style="position:absolute;background:green;height:55px;top:5px;left:5px;z-index:100;">I should be at the top of the stacking order.</div>
</div>
<div>
<div style="position:relative;background:red;height:300px;">
If you can read this, I am higher in the stacking order than the green <div>
</div>
</div>
</body>
</html>
The only way that I can get the absolutely-positioned <div> to display at the top of the stacking order as it should is to remove the relative positioning from the other <div>. Unfortunately, for several reasons, this is not an option. This is only happening in IE6 and 7. Anyone have any any ideas? I am trying to get the footer DIV to appear directly below the content div on the page. Cant get it to work. CSS and DIV code is below if anyone can offer some advice? Thanks. Code:
#page_footer {
background-color: #ff0000;
width: 729px;
height: 30px;
position:relative;
bottom: 0px;
left: 35px;
font-family: arial, tahoma, times new roman;
font-size: 11px;
font-weight: normal;
color: #5A5A5A;
}
<!-- // MANDATORY PAGE CONTENT HOLDER // -->
<div id="page_content_holder_sizing">
<div id="page_content_section_name"><?=str_replace("::", "-", $page_title)?></div>
<div id="page_content_top_stroke"><img src="/site_images/pre_load/spacer.gif" width="729" height="4"></div>
<div id="page_content_bottom_stroke"><img src="/site_images/pre_load/spacer.gif" width="729" height="4"></div>
<!-- // CONTENT TEMPLATE // -->
<!-- // END CONTENT TEMPLATE // -->
</div>
<!-- // MANDATORY PAGE FOOTER // -->
<div id="page_footer">
footer goes here
</div>
<!-- // END MANDATORY PAGE FOOTER // -->
<!-- // END MANDATORY PAGE CONTENT HOLDER // -->
Hi, I'm curious as to whether anybody knows of any in which to preload a specific - or all of them - background image that's set in CSS. For example, I might have several background images in place as borders or graphics: Code: background: #333333 url(display_bg1.jpg) no-repeat center 30px;
}
{
background: #000000 url(display_bg2.jpg) no-repeat center 30px;
}
{
background: #999999 url(display_bg3.jpg) no-repeat center 30px;
How, perhaps using javascript or php, would I force "display_bg3.jpg" to load before any other image? Thanks, DB In what order are CSS/html files loaded? Concurrently? What about browser rendering? Must all CSS be loaded before any html is rendered? Also aside from serverside compression / css whitespace (file) compression, removing redundant classes, and using relative paths, is there any other ways to speed loading of CSS? Would it be of benefit splitting my css file into smaller chunk files - would they all load concurrently and therefore faster? Does anyone have a good solution for forcing the cache of css files, but not the html calling the css? Thanks in advance! Ross Hello there I cannot get the following css to give me a reverse order on navigation items floatet right. Can anyone help please? .nav-container { background:#40391d;} #nav {width:950px; margin:0; padding:0px; background:#7f7a60; } #nav li { position:relative; float: right; border-left: 1px solid #fff;} #nav a {padding:5px 12px 6px 12px; color:#fff; font-weight:bold; background: #7f7a60; border: 1px solid #7f7a60; } #nav a:hover {color: #000; background: #fff4c0;} I'm working on a Shopping Cart, and when I go to view_cart.php to view the shopping cart within the browser, everything is great Quote: Item Name Qty Price However, when I click the Order button, the order gets emailed, and it's not correct. For example, there's an item named Money Paddle. In the email, it shows like: Quote: Money Pa! ddle The item that gets messed up, is the item after an item that takes up 2 lines. (The item that shows up on 2 lines, is: The Vanishing Box- Make small objects disappear...) So, the items will show up as: Quote: Silk Shoes 1 x $19.99 The Vanishing Box- Make small objects 2 x $9.99 disappear... Mega Bal! l & Vase 1 x $4.99 Amazing Magic Set 1 x $4.44 I checked the database to verify there are no special characters or anything, and it all seems fine. So not sure what I'm missing to have it display correctly, but here's the code to email the message: PHP Code: $recipient = "orders@domain.com"; $subject = "Order"; $mailheaders = 'From: <mailing@domain.com>'."\r\n"; $mailheaders .= 'Reply-To: mailing@domain.com'."\r\n"; $mailheaders .= 'Return-Path: <mailing@domain.com>'."\r\n"; $mailheaders .= 'Content-type: text/html; charset="ISO-8859-1"'."\r\n"; $sent = mail($recipient, $subject, $display, $mailheaders); I have tried several times, and it always shows up the same way in the email only. The browser is fine when displaying the cart. I'm assuming, it may have to do with the php code itself, as this only happens with the item after the 2 liner (regardless of the next item) PHP Code: $sql_view = "SELECT `id`, `user_string`, `item_code`, `quantity` FROM `cart` WHERE user_string = '$user_string'"; $result_view = mysql_query($sql_view, $conn) or die(mysql_error()); if (mysql_num_rows($result_view) > 0) { $subtotal == 0; $display .= "<div style=\"width:250px; float:left;\">Item Name</div><div style=\"width:50px; float:left;\">Qty</div><div style=\"width:100px; float:left;\">Price</div><br />"; $display .= "<div style=\"clear:both;\"> </div>"; while($row = mysql_fetch_array($result_view)) { $id = $row['id']; $item_code = $row['item_code']; $quantity = $row['quantity']; $sql_item = "SELECT `item_name`, `msrp`, `image` FROM `products` WHERE item_code = '$item_code'"; $result_item = mysql_query($sql_item, $conn) or die(mysql_error()); while($row = mysql_fetch_array($result_item)) { $item_name = $row['item_name']; $msrp = $row['msrp']; $image = $row['image']; $subtotal = ($quantity * $msrp) + $subtotal; $display .= "<div style=\"width:250px; float:left;\">" .$item_name . "</div><div style=\"width:50px; float:left;\">" . $quantity . " x </div><div style=\"width:100px; float:left;\">$" . $msrp . "</div>"; $display .= "<div style=\"clear:both;\"></div>"; } } $display .= "<div style=\"width:340px; text-align:right; padding-right:10px; padding-top:10px; border-top:1px solid black;\">$".$subtotal."</div>"; } $recipient = "orders@domain.com"; $subject = "Order"; $mailheaders = 'From: <mailing@domain.com>'."\r\n"; $mailheaders .= 'Reply-To: mailing@domain.com'."\r\n"; $mailheaders .= 'Return-Path: <mailing@domain.com>'."\r\n"; $mailheaders .= 'Content-type: text/html; charset="ISO-8859-1"'."\r\n"; $sent = mail($recipient, $subject, $display, $mailheaders); if ($sent) { // $sql_delete = "DELETE FROM `cart` WHERE `user_string` = '$user_string'"; // $result_delete = mysql_query($sql_delete, $conn) or die(mysql_error()); header("Location:view_cart.php?error=no"); exit; } else { header("Location:view_cart.php?error=yes"); exit; } (I know I have inline CSS right now... will correctly place them in CSS file or whatnot after I get things working properly.) Thanks for any help. If you need further info, let me know. (If this belongs in PHP, move it accordingly.) Hello everyone, I am currently trying to find a solution in css that would allow me to alter the design of the following html structu Code: <body> <div id="header"> Website Title Here </div> <!-- header --> <div id="content"> <div id="article"> Article goes in here </div> <!-- article --> <div id="menu"> Menu goes in here </div> <!-- menu --> </div> <!-- content --> </body> What I want to do is keep that structure intact so that when someone visits the page from a text browser or something else that does not support css, the article appears before the menu. But I want the menu to appear before the article when someone has css enabled (not to the left or right of the article, but above it altogether). I tried using the "position: absolute; top: 0; left: 0;" tag on #menu, and while it does move the menu right under the header, it doesn't bump the article under the menu, it leaves them both overlaying each other. The first solution that comes to mind would be to add the same css tags to #article and move it down by the height of the menu, but the problem is that the menu will always vary in height. Is there a way to make the article align itself with the bottom of the menu div without using fixed values? Thanks! Jerome First of all, I hope this makes sense - I just spent two hours nonstop tweaking the navigation on my first client's site, and my brain and eyes are a bit frazzled. I have the navigation in a list, displayed horizontally in a Suckerfish dropdown. The container is elastic but the navigation is not; I want it to stick to the right side but move to the left when the browser is made narrower. Floating it to the right works perfectly.. But it reverses the order of my list items so that "Home" is to the far right instead of the left. Is there any way to reverse the order of the list items without touching the HTML? Going for full accessibility here, so I obviously don't want to reverse the item order in the HTML. I could probably figure this out on my own but it would take time, and like I said.. My brain is a little wonky right now Thanks in advance! Hi ... I'm new here. I hope someone can help me. I've taken a Dreamweaver CS3 3-column template and added a fourth column. Everything looks okay until I move the "main content" column above columns 2 and 3 in the source code (so that it will load before them, because they have external content). Then I get float drop with columns 2 and 3. Since I'm a new user, I'm not allowed to post URLs, but I think if you go to my profile you can see my home page address. Then just add the following paths: Page without float drop (before changing column order) /new/index.html Page with float drop (after changing column order) /new/about.html I tested this on the basic DW template that I started with, and it has the same problem. I ran my page through the CSS validator with only two errors that I can't figure out. However, I get 75 errors when I use the XHTML validator, and I think I'll have a nervous breakdown if I have to try to fix all that. I know it's probably something to do with margins or floats, but I've tried everything I can think of and I'm at wit's end. Thanks in advance. Greetings all, Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it. I was wondering if there are any good references/books you'd suggest purchasing or looking at online? Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this: ___________________________ |[ i m a g e ]....................text | However, it comes out looking like this: ___________________________ |[ i m a g e ]..........................| |.....................................text| I suspect it is due to the align: right of the text, but am not sure how to correct it. Relevant snippets of code: testpage.html Code: ... <div class=header> <img src="image.jpg"><h1>TEXT</h1> </div> ... style.css Code:
...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}
#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}
Thanks for any advice. Hi, I have three <div> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="container" style="width:500px;height:700px;background-color:green;">
<div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div>
<div id="three" style="float:right;width:100px;background-color:red;">three </div>
<div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div>
</div>
</BODY>
</HTML>
I noticed when I increased the % width of my <div two> it goes below my <div three> I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior? If I have a link that I want to display in the center of a module that no matter what size a user chooses it stays centered..IE. via user config a user can make it 100px or 400px.. [module width] The question is how can I center a link and no matter what the user picks for a width as stated above the link stays centered? Anyone know why the <div>'s aren't displaying correctly in FF? View with IE if you want to see how it should look. http://www.cooperworkskilns.com CSS: http://www.cooperworkskilns.com/styles/layout.css I'm not sure is this question relating to css or javascript. Pls help. thanks alot Q1: What are the ways you can deal with x-browser issues? What are the pros and cons of each? Thanks, Gary |
|||||||