hey guys i have a problem in my page my page is runnig well in firefox but it runnig very bad in IE. photoes: please help me thank you
thank you i erased the </div> but it runnig bad yet can you edit my script,please thank you my friend
You probably erased wrong </div>, erase his one: bellow: "...hits on</div><div>" <-- leave x </div> <-- erase above: "<div class..." <-- leave You will have to adjust margin and padding after that but i am sure you know how to do it.
thank you i erased all </div>s but i didnt seen any diffrence This is my page after edit: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>?</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div id="title"> <div class="title_left"></div> <div class="title_right"></div> <div class="title_middle"><div class="title_pad">Sony Ericsson K770 Cyber-shot hits on</div></div> <div class="f_cont"> A new addition to the Cyber-shot family is already a fact - the new Sony Ericsson K770 was announced today. As you may have probably heard, today Sony Ericsson Update: Live photos added</div> </div> </body> </html> HTML: can you edit my codes? Thank you
... don't use 1 div for the title row AND the content (text) space... won't do any good., use 1 <div> as a container for left, right and middle then 2nd div with the same margin/padding and width settings for the content cheers.
Hmmm, would you be willing to make one div with the text set a certain, set width? I almost think it would be easier to have one div with a single background image (your two corners and middle part combined). Set background image of your single div to top center. I assume you have three divs because you wanted the box to be able to grow and shrink, right? If that is not a must, then one div that is always the same width is easier. Without seeing the CSS, we can't really see why the last div is sitting next to the other three. Normally, divs don't do that unless floated.
thank you my friend i used one div, then included 2 divs in it and arranged them by css final code is: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div class="box"> <div class="title_middle"> <div class="title_left"> <div class="title_right"> <b>Sony Ericsson K770 Cyber-shot hits on</b> </div> </div> </div> <div class="content"> A new addition to the Cyber-shot family is already a fact - the new Sony Ericsson K770 was announced today. As you may have probably heard, today Sony Ericsson Update: Live photos added </div> </div> </body> </html> HTML:
Still a bit heavy on code, though the doctype at least addresses some issues. I would seriously look at ditching at least two of those extra wrapping DIV's, and a healthy number of classes for something along the lines of the sliding doors technique... I'd also swap that 'title' to a header of some sort... hmm. I would suggest coding that as: <!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" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sliding Doors Version</title> <link rel="stylesheet" type="text/css" href="screen.css" media="screen, projection" /> </head><body> <div class="itemBox"> <h2><span>Sony Ericsson K770 Cyber-shot hits on</span></h2> <div class="content"> A new addition to the Cyber-shot family is already a fact - the new Sony Ericsson K770 was announced today. As you may have probably heard, today Sony Ericsson Update: Live photos added </div> </div> </body></html> Code (markup): To use a sliding doors type image - one image instead of three... probably make it 2048x96 or so... just to cover future use. (especially since as a .png it would still be smaller than your three images combined at that size) The css would likely be something like: * { margin:0; padding:0; } body { font:normal 75%/140% arial,helvetica,sans-serif; margin:0 30px; } .itemBox { width:322px; margin:10px 0; float:left; } .itemBox h2 { padding-left:22px; margin-right:22px; text-align:center; background:url(images/header_background.png) top left no-repeat; font:bold 120%/140% arial,helvetica,sans-serif; } .itemBox h2 span { display:block; padding:4px 22px 4px 0; margin-right:-22px; background:url(images/header_background.png) top right no-repeat; } .itemBox .content { padding:10px; border:solid #46F; border-width:0 1px 1px; } Code (markup): Which looks something like this up and running. http://battletech.hopto.org/for_others/Mrans/template.html Let's go through my 'choices' 'sliding doors' is a image technique to allow dynamic sizing while using less separate images and less code. First you make an image bigger than your concievable render size... I like to use 2048 as my width for this - because there are so many 2440 users out there - and I figure 96px is tall enough that even at large fonts that's four lines of text for the header. Gotta keep in mind you might want word-wrap as a feature in the future. So, here's the image: http://battletech.hopto.org/for_others/Mrans/images/header_background.png Which I remastered to also have semi-transparant corners (though they are still AA'd so you'd want to use them over near-white patterns still) and cleaned up a bit. 1.77k 64 color .png On the HTML side, when looking at the box we want to wrap each section as minimalist as possible while using tags (where possible) to describe the content. The whole 'section' is a box unto itself, so the outer wrapper there made sense - I changed to a class because I figure you would have multiple instances of this styling per page. The top part you called 'title' is a header for the box - so let's use a header tag. We need an extra wrapper for the 'sliding doors', so a simple SPAN can handle that. (saving us a bunch of classes!) The 'content' may have multiple elements like actual separate paragraphs, so I'd also give that it's own box... and that's IT for the HTML. On the CSS side, I'm using %/em fonts. Usually I would say use px or pt here, but we've got enough width and dynamic 'growth' available in the header it's safe to use. This way IE users can resize the text and Large Font users in IE/Opera aren't diving for the zoom control because of the baby sized 12px fonts. (though FF and Safari users in a 'large font/120dpi' windows environment or '100dpi' *nix environment still need to zoom) Instead of just declaring arial, it's always a good idea to declare some fallbacks if arial isn't present... and I don't trust default line-heights and like a bit more spacing so I declare my line-height too - at which point it's less code to just declare the whole thing as a single font declaration. .itemBox - set the width, set the margin - not sure why the float but I left that in too. .itemBox h2 - We pad the left side so our span is pushed off of the background image which has the left rounded corner. The Margin-right pushes that other side in so the background doesn't stretch under. This allows us to use transparant corners if desired. Again we declare our font size... and again the entire condensed line ends up less code (or about the same amount of code) than separate declarations would be. .itemBox h2 span - The span has to be changed to display:block so it auto-stretches to the proper dimensions - we pad the top and bottom a bit... and here comes the 'cute' part. By applying a negative margin-right of 22 pixels, we make the span overflow outiside the h2 letting us put our 'top right' image in the proper place. We then pad that same right side so the paddings on each side of the header are the same. (when/if CSS3 is ready for deployment in the wild, this extra span goes bye-bye!) .content - padding, border... no real surprises except you'll notice I condensed the border declarations to something a bit simpler/smaller. Oh, and I made the border match the color of the border in the top image. You'll notice on the above three declarations nowhere do we explicitly declare the width. This is intentional as the default behavior of block level elements is to fill the available space after figuring in borders, margins and padding. This means all our widths are controlled by the outermost container - .itemBox. This is a very versatile technique once you master it, and greatly reduces the code involved. In some circumstances you can even reduce the code further using some tricks like "list-style-image" or ":first-letter", but those advanced techniques often require a good deal of CSS chicanery and are only good for a handful of situations - whereas the above is dynamic. Best of all, it works flawlessly in all current browsers (IE 6&7, FF, Opera, Safari) but in IE 5.2 and 5.5 as well with NO HACKS and less code - always a good thing. Hope this helps - any questions fire away.
deathshadow is right, its very heavy code. Strip everything down to the bare minimum and use one class per div for whatever text format you want. Have you got a live "online" example/link?