Ok I am switching from using tables to Div tags and CSS. Everything has been going really good until I add this text under the flower on the page. In IE it looks just like I want it. But in Firefox and safari there is a space that I can not remove. I have been able to get the space to be remove but then it messed up another part of my page basically it moved top of my page down 10 or 20 px I am guess. www.designedmemories.com/template2 So you can view my source code. Thanks ahead of time
Don't use style attribute into html. Your html code hard to read and understand. Your all ccs styles keep in .ccs files.
ok thanks. I was going to go back and fix that or clean up my code. Question I am using dreamweaver MX Should I upgrade to CS5 will that also help me. I have a bad habbit of leaving out semicolns so it helps me with the coding using Dreamweaver.
When people learn something new - understand all is hard. If you not understand much things - its normal. If you make mistakes - its normal. This should be your html file Example - without style.css not work <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <title>Your title</title> </head> <body> <div id="wrap"> <div id="header"> </div><!--End Header --> <div id="sidebar"> <ul id="nav"> <li><a href="">home</a></li> <li><a href="">about us</a></li> <li><a href="">selections</a></li> <li><a href="">questions</a></li> <li><a href="">contact us</a></li> </ul> </div><!--End Sidebar --> <div id="content"> <p>your text<br />your text</p> <p>your text</p> <p>your text</p> <p>your text</p> </div><!--End Content --> </div><!--End Wrap --> </body> </html> HTML: No css and other things. I don't use Dreamweaver. But I think Dremweaver CS5 better. You must understand the principles html and css (web design) it is more important than Dreamweaver.
Repeat the web developer's mantra: If it works in IE but not the other far more modern browsers like Firefox and Safari, your markup is wrong! Never, EVER trust IE to do ANYTHING right. If you are testing IE first, you are doing things backwards. Validate your html and css for your list of 1HTML error and 16 CSS errors.
on the note regarding MX vs. CS5. Personally I like CS4 the best. 5 has some new features but it's still buggy at least on the mac
Already pointed by "drhowarddrfine", just wanted to emphasize on validation, not at all a bad idea, isn't it? and while coding primarily use standard modern browser and secondarily use IE to check if things are okay.
I want to say thanks and I was able to fix my issue with the spacing. But I am redoing my code to clean up my code. Thanks
designedmemories.com/template3 Ok I think i took everybody suggestion I know my HTML code is looking alot better. I do have couple question: 1. is this part correct: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2. the script they show is for NAV 4 is this even necassary anymore. Also with some of my images I had to use absolute instead of relative to get the image to show. I do not understand why. I thought either was interchangeable. thanks for everyones help! /* CSS Document Below is the code for the page layout */ body { background-image:url(../Images/1st_backdrop.jpeg); /*Black Background */ background-repeat:no-repeat; background-position:top center; background-size: 100%; /*font-size:100%; line-height:18px;*/ } #container { position: relative; margin:auto; Width:100%; visibility: visible; } #header /* the gray background */ { background-image: url(../Images/2nd_backround.PNG); background-repeat:no-repeat; position:relative; width:765px; height:1170px; left: 455px; z-index:1; border: 1px none #000000; visibility: visible; } #topswag { background-image: url(../Images/top%20swag3.PNG); background-repeat:no-repeat; position:absolute; width:1600px; height:180px; left: -8px; top: -11px; margin-top: 0; z-index:2; border: 1px none #000000; visibility: visible; } #logo { background-image: url(../Images/Logo/Final_Logo.png); background-repeat:no-repeat; position:relative; width:400px; height:151px; left: 310px; top: 6px; z-index:3; border: 1px none #000000; visibility: visible; } #welcome /*welcome banner */ { background-image: url(../Images/header3.png); background-repeat:no-repeat; position:relative; width:763px; height:95px; left:1px; top: 190px; z-index:4; border: 1px none #000000; visibility: visible; } #redline { background-image: url(../Images/line.png); background-repeat:no-repeat; position:absolute; width:90px; height:1032px; left: 347px; top:170px; z-index:4; border: 1px none #000000; visibility: visible; } /* main content below this point */ #flower1 { background-image: url(../Images/Flower_alone1.png); background-image: no-repeat; position:absolute; width:100px; height:63px; left: 156px; top: 295px; z-index:4; border: 1px none #000000; visibility: visible; } #maintext { position:absolute; width:424px; height:253px; left:1px; top:366px; margin-top: 0; z-index:7; visibility: visible; } .maintext { text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 0; color: white; font-size: 24px; } /* this loads the special font for the word "ART" */ @font-face { font-family: Jellyka; src: url(../Fonts/JellykaWesternPrincess.eot) /* EOT file for IE */ } @font-face { font-family: Jellyka; src: local("Jellyka Western Princess.ttf"), url(../Fonts/JellykaWesternPrincess.ttf) format("truetype"); /* TTF file for CSS3 browsers */ } #mainart { /* font-family:Lucida Sans; */ font-family: Jellyka; src: url(../Fonts/JellykaWesternPrincess.eot); font-size:50px; margin-top: 0; color:white; text-align:center; } #picsrtside { background-image: url(../Images/rightside_pic.png); background-repeat:no-repeat; position:absolute; width:320px; height:624px; left:435px; top: 292px; z-index:4; border: 1px none #000000; visibility: visible; } #picsbtside { background-image: url(../Images/bottomside_pic.png); background-repeat:no-repeat; position:absolute; width:745px; height:195px; left:10px; top: 940px; z-index:4; border: 1px none #000000; visibility: visible; } H1 /* setting for the terms and condition page */ { font-family:"Lucida Sans"; font-weight:bold; font-size:16px; color:black; margin-left:10px; margin-right:10px; text-decoration:underline; } }
No. It will work OK in almost every situation but the correct doctype is this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Or you can, probably should, start using the newest one <!DOCTYPE html> but some will complain that it's the HTML5 doctype. They are confused. The last guy using Netscape died last year. They are not and behave significantly differently but that's all I have time for right now.