Why are there white spaces between my images when I preview my html design on a web browser?

I am creating an email newsletter with Dreamweaver CC and after being unable to find a way to use layers I opted to create the entire image in Photoshop and then break it into pieces to create the image links. I'm using tables and I have the padding and everything set to "0", but when I view it in the browser there are white spaces between each image. It looks solid in Dreamweaver, but in pieces on web browsers. I do not understand how or why this happened and I cannot figure out how to fix it. If anyone can help, I'd greatly appreciate it. Thanks.

I only used Photoshop for the layout. Then I created web-safe images for everything that I used for Dreamweaver. I uploaded the images to the internet and then image sourced them into the code so that they will be viewed properly in the correct circumstances. I haven't used HTML since about 2004 and I wasn't very good then. I've just been thrown back into it and I'm pretty much learning as I go. This is my second attempt because I wanted to make the newsletter more eye-catching. My first one is very basic and without a background image at all and that looks fine in pretty much all email clients. I tested it with Litmus. All except for Windows Live Mail, where the images didn't act as links but as static images. It works fine with the others I tested manually. Those being Gmail, Yahoo and AOL. I will try the display:block and get back to you. Thanks for your suggestions.

Similar Messages

How to remove white space between sliced images ? Please help.

I've created a site by exporting sliced images from Photoshop into Dreamweaver. Some images have a thin white line between them that I can't get rid of. I think it's because they are in a table format. There is no cell padding. Can you help me remove them? (see code below) The images I'm talking about are the horizontal buttons used in the navigation bar. Thank you in advance!
Here is a link to the site: Site Preview
--------------CODE---------------
<table width="1001" height="751" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
      <td colspan="17">
        <img src="../Images/Optimized-Header.gif" width="1002" height="188" alt="logo header"></td>
      <td>
        <img src="../images/spacer.gif" width="1" height="194" alt=""></td>
      </tr>
    <tr>
      <td rowspan="2">
        <img src="../images/white-space-top-left.gif" width="44" height="45" alt=""></td>
      <td colspan="16">
        <img src="../images/Creekside-Layout-Final_03.gif" width="956" height="1" alt=""></td>
      <td>
        <img src="../images/spacer.gif" width="1" height="1" alt=""></td>
      </tr>
    <tr>
      <td colspan="3"><a href="../creekside_homepage.html"><img src="../images/about-btn1.gif" width="157" height="44" alt="about"></a></td>
      <td colspan="3"><a href="../steam_and_sauna_page.html"><img src="../images/steam-and-sauna-btn2.gif" width="233" height="44" alt="steam and sauna"></a></td>
      <td colspan="3"><a href="../creekside_hot_tubs_page.html"><img src="../images/hot-tubs-btn3.gif" width="162" height="44" alt="hot tubs"></a></td>
      <td colspan="3"><a href="../creekside_rentals_page2.html"><img src="../images/rentnals-btn4.gif" width="151" height="44" alt="rentals"></a></td>
      <td colspan="3"><a href="../creekside_contact_page.html"><img src="../images/contact-us-btn.gif" width="211" height="44" alt="contact us"></a></td>
      <td>
        <img src="../images/white-space-top-right.gif" width="42" height="44" alt=""></td>
      <td>
        <img src="../images/spacer.gif" width="1" height="44" alt=""></td>
      </tr>
    <tr>

Your slices appear to be a little bit off.
Use Photoshop for images only. Use DW to build your web pages. Exporting HTML from graphics apps is not going to produce good cross-browser results. It's really only for quick prototypes; not real web sites.
See this 3 part tutorial:
Taking a Fireworks (or Photoshop) comp to a CSS Layout in DW
Part 1 - Initial Design
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
Part 2 - Markup preparation
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt2.html
Part 3 - Layout and CSS
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt3.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Why is there a difference between LR4 image and PS-CS5 version which is much darker

if i get an image to look great in LR4 (v. 2012) after upgrading the cat from LR3,(version 2010) - and it looks great in the new develop mode, then I open up the image in the latest PS CS5, version 12.0.4 x64, the image then looks much darker in PS and in no way matches the image in LR 4.
NOT ACCEPTABLE! WHY, Adobe??
I'm on a 64 bit Mac, OS 10.6.8 -- my catalogue settings in LR are for the largest monitor, highest preview, don't discard... and it writes changes immediately to xmp
is it because the RAW processor in PS doesn't yet match the one in lightroom? and it won't be the same till CS6 is out, and I upgrade to that? Adobe says all my software is up to date. How do I get things to match? never had this problem with LR3 or any earlier version. What's up? I'm not on the beta - i just downloaded the real thing from Adobe - read all about it online and I've been very comfortable wiuith LR for years, but I should be able to hit command E on my mac and open it up in PS, looking exactly the same in PS as the image in Lightroom. the new develop mode in LR4 is awesome - so much better than LR3 which was so much better than 2. Why is this happening? How do i get the images to match? what am i doing wrong, if anything? any clues anyone? thanks in advance. ( would love to include a sample, but I don't see how i can attach a scressn shot of the two.)
anyone?
owen

thanks for replying, Jeff. You may be a user ( that sounds funny ) but you are certainly one well connected user. thanks for getting back,
I just click command E using the shortcut for "edit in CS5." I never go to the menu, if i know the shortcut. My basic color settings for PS has for years been what i have set up as a ProPhoto /rel. colorimetric color space on both PS... and in LR, my edit in PS-CS5 set up is for a PSD in 16 bit ProPhoto as well - should look the same, right? You'll probably scold me for saving as a layered PSD instead of a layered tiff - I can't remember why - but I do have my PS preference set for ALWAYS maximize PSD and PSB compatability. Could you give me your advice and reason for tiff vs PSD. I hear that PSD can be "less efficient" than tiff with respect to metadata updates. Not sure exactly what less eficient means or what problems may arise with PSDs.
Years ago I got into RAW files with the D65 workshops with Seth Resnick and Jamie,before there ever was a lightroom - in fact i first downloaded the first ACR plug in from adobe before it became a part of PS - ( early 2003? ) - and perhaps you pixel geniuses don't always see eye to eye on certain things but i respect both of your opinions and your work and I'm thankful that you are both out there helping us... and Thomas and all the hard working people at Adobe too.
So... after posting, in the deveop mode in LR4 - I switched process versions from 2010- (there was a slight change)- then i switched it back to 2012 - then reopened the file ( exported it to CS5 ) in PS - and lo and behold - it all looked good. the lightroom and PS versions looked like a match - perhaps I should chalk this up to user error. not sure.
that said, when i take a canon CR2 file and just drop it into PS on my dock and it opens in CS5's ACR - I still see the ACR equivalent of LR3- which is to say - the exposure, recovery, fill light system- not the new development modality of exposure/contrast - highlights, shadows, whites and blacks -- do you know if we have to wait for CS6 to see the new ACR that matches Lightroom4 - or is an update soon forthcoming? what do you say, Big Guy?
and many thanks for your attention, your knowledge , and your sense of humor.
~oc

Why are videos using space on my phone when there are no videos on my phone?

When I sync my phone is shows that quite a bit of space is being used by video, but there shouldn't be any videos. How do I free up that space that is supposedly being used by "video". Thanks.

ansbrad wrote:
My phone keeps giving me a notification that my storage is almost full. It looks like the photos & camera are taking up most of the space, however I only have 99 photos on the phone and photo streaming is turned off, but it still has 3.9KB used space under shared photo stream. How do I delete this?
1 gigabyte = 1024 megabytes. 1 megabyte = 1024 kilobytes.
1 gigabyte = 1048576 kilobytes.
3.9 KB is 0.38% of a MB, and 0.00037% of a GB
If your iPhone is a 8GB model, then you are literally worrying about 0.000046% of the device's total space.
Or, to look at it another way, an 8GB iPhone has 8,388,608 kilobytes of total space. Are you really concerned about less than 4 KB out of 8.3 Million?
Or... Let's say that you had $83,886.08 in your bank account. Would you worry about trying to find the nickel that rolled under the fridge?

Last month my data cycle was from the 12th to the 12th. Now for the end of this month its til the 20th. Why are there more days between when my data cycle refreshes from last month?

I guess I said everything in the topic...anyways, from March 12 to April 12 was the data cycle. After April 12 it shot up to May 20th! That's a whole extra week of data that is definitely going to be over because there are more days use data? Why?

G42od wrote:
We share 4gb for our plan. It works out perfectly usually. But this month says the new data cycle doesn't start til the 20th. We've already gone over a gig easily in this extra week. My billing cycle is always set at the 15th of every month and that has not been a problem...until we go over in data and get charged more money. Is the data cycle going to fluctuate every month?
Your billing cycle and your "data cycle" are the same, and that cycle doesn't change, unless you request it or maybe if you bundle services or something. For example, my bill cycle runs from the 18th of one month through the 17th of the next. My due date sometimes varies a few days, not really sure why, probably because not all months have the same number of days. If you look at the breakdown by line on your bill, you will see these dates. What you are describing sounds like the due date is different than usual. All lines on the same account have the same billing cycle for all services...calling/texting plan, data plan, insurance, etc.
I am a little confused, though, because you stated your "data cycle" is always the 12th through the 12th (it would actually be the 13th through the 12th), then you say the bill cycle is always set for the 15th, and then you say the data cycle is pushed to the 20th this month. What is the billing cycle for the voice/text plan? What date did the bill print (this should be on the first page)? Finally, what is the due date on the most recent bill? Bill cycle and due dates are not the same.

Why are there audio clicks between clips?

I am sequencing several clips together (different camera angles and scenes) and when it switches to another clip there in an audible click or pip noise. It's very noticeable especially when there are several short clips right in a row. This has never happened to me before but now it is happening between every clip. I also exported the video to see if the clicks were still there in a "finished" video. they were still there. What do i do?

Shorten or lengthen one or both of the adjacent clips by one or two frames. You will have to see what combination works.

Why are there print differences between Reader and Acrobat Pro

I have a PDF file generated by InDesign (CS3). When I print the PDF from Reader (8.1.4) I get lighter text than when the same file is printed by Acrobat Pro (9.1.0). A close examination of the printed letters shows that the text printed from Reader is not solid black, while the text from Pro is solid black.
Is this typical or is there something I need to do to improve the printing from Reader?

I am a CADD Coord. (CADD Mgr)designer) I used to do a lot of design. Just recently we have noticed that anything printed from Adobe, the reader or the full version, is printing so lightly in many cases that it looks like it is missing data. whenever we create teh PDF from Autodesk products or Bluebeam Revue, it is the same. Bluebeam prints perfect. Yet the exact same file printed through Adobe is very, very light. Even printing as image it does this. And it appears at random. Some people print ok, but the exact same printer sent by someone else, using the same method, comes out too light in Adobe.
I have contacted Autodesk and they have punted it back. Anyone have any answers or clues to fix? i send out deliverables for clients all the time and I hate to find out they print and miss something of the design.

Why are there white blocks on my website?

Hello guys!
I have been creating a site for an aviation thing, and after I got the site ready and uploaded onto the hosting, white blocks are near the slices. Any ideas? In dreamweaver, it shows up perfectly fine.
http://flyvirtualvirgin.com/untitled%20folder/ComingSoon-White1.html
Please respond ASAP
Cheers!
Carlton

after I got the site ready and uploaded onto the hosting, white blocks are near the slices. Any ideas?
Your link takes me to a BC login page, but from your post it's likely that you have committed the first deadly sin of web development: using a graphics application to create your HTML. Your symptoms perfectly match what is expected to happen when you take a cumbersome table layout that is only intended for use in controlled demonstrations or presentations, and try to use it on the web. What is happening is that your table with its many colspans and rowspans (merged and split cells) is not able to respond properly to different browsers and different viewport widths and different character face sizes. One should use graphic apps to make graphics, and use DW to build your HTML. Here are some informative and interesting articles about this -
http://www.apptools.com/rants/spansevil.php
http://www.apptools.com/examples/pagelayout101.php

Why are there white bars across the top of my iPhone 5 screen?

I have a brand new iphone 5 (not 5S) which has white bars across the top of the screen. The bars are quite faint at first, if the screen has been locked for a while but they get brighter while you use the phone. The bars overlap and obscure the time and battery symbols but you can still see through them with effort. I have tried turning it off and on again but this has not helped. It may have happened after the phone was updated to the latest version (iOS 7.1.2). this was required so I could transfer my old phone's information from a backup. Has anyone experienced this issue or know the cause of it?

Hi Ererer, I am sorry to hear that you are having that problem with characters showing up at the top of your screen. I had a similar problem so I understand how frustrating it can be. This problem has been linked to some antivirus software. Could you tell me what kind you use? I have also found an easy solution to this. When they appear simply drag the window from its maximized state down. It will no longer take up the full screen and the characters will be gone and everything will be back to normal. If you want it maximized again simply drag it back. I hope this helps.

Why are there 26 firefox.exe processes running when the taskbar shows none?

Win 7 professional, Firefox 25.0.1. If I shut down Firefox and restart it I often get an error that a copy is already running. Checking the Task Manager shows many firefox.exe processes (26 this morning) even though the application tab shows none.

Hello Axis,
Can you please confirm if this happens each time you are using Firefox? Also, the cache size wouldn't have a big bearing on this issue happening. Can you please try if this issue happens when you are running Firefox in safe-mode (instructions below). if it doesn't then we can narrow the issue to a plugin / addon.
<hr>
Safe Mode is a troubleshooting mode, which disables most add-ons.
''(If you're not using it, switch to the Default theme.)''
* On Windows you can open Firefox 4.0+ in Safe Mode by holding the '''Shift''' key when you open the Firefox desktop or Start menu shortcut.
* On Mac you can open Firefox 4.0+ in Safe Mode by holding the '''option''' key while starting Firefox.
* On Linux you can open Firefox 4.0+ in Safe Mode by quitting Firefox and then going to your Terminal and running: firefox -safe-mode (you may need to specify the Firefox installation path e.g. /usr/lib/firefox)
* Or open the Help menu and click on the '''Restart with Add-ons Disabled...''' menu item while Firefox is running.
[[Image:FirefoxSafeMode|width=520]]
''Once you get the pop-up, just select "'Start in Safe Mode"''
[[Image:Safe Mode Fx 15 - Win]]
'''''If the issue is not present in Firefox Safe Mode''''', your problem is probably caused by an extension, and you need to figure out which one. Please follow the [[Troubleshooting extensions and themes]] article for that.
''To exit the Firefox Safe Mode, just close Firefox and wait a few seconds before opening Firefox for normal use again.''
''When you figure out what's causing your issues, please let us know. It might help other users who have the same problem.''
<hr>
Thank you.

White space between images

I have 5 rollover images lined up beside each other in a
table cell. I have reduced their borders to 0, the cell padding and
cell spacing to 0 also. I even tried reducing the images padding
and margin to 0. However, there is still a really thin line between
each of the images that i want to get rid of (it's as if the images
all have a small white border around them, but I've reduced their
borders to 0).
Here is what the code looks like:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="53">
<div id="box">
<p align="right"><img src="banner.jpg"
name="banner" width="536" height="101" border="0" id="banner" />
<a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('home','','Buttons/homebtnover.jpg',1)"><img
src="Buttons/homebtnup.jpg" name="home" width="107" height="36"
border="0" id="home" /></a><a href="#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('theteam','','Buttons/theteambtnover.jpg',1)"><img
src="Buttons/theteambtnup.jpg" name="theteam" width="107"
height="36" border="0" id="theteam" /></a><a href="#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('schedule','','Buttons/schedulebtnover.jpg',1)"><img
src="Buttons/schedulebtnup.jpg" name="schedule" width="107"
height="36" border="0" id="schedule" /></a><a href="#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('gallery','','Buttons/gallerybtnover.jpg',1)"><img
src="Buttons/gallerybtnup.jpg" name="gallery" width="107"
height="36" border="0" id="gallery" /></a><a href="#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('contact','','Buttons/contactbtnover.jpg',1)"><img
src="Buttons/contactbtnup.jpg" name="contact" width="108"
height="36" border="0" id="contact" /></a></p>
</div> </td>

.oO(Twinbird24)
>It still doesn't work. I've even tried to just make a new
document and just
>place the rollover images beside each other in a row
(horizontally). However,
>even with the image's borders, padding, and margin set to
0, there still seems
>to be a really small space between the images.
>
> Here is a link to the rollover images, as you can see,
there is that small
>white space between the images:
>
http://www.arkdesigns.ca/untitled.html
The gap I see is in the images themselves - the outermost
right and
bottom pixels are faded. There's no other gap between the
images in
Opera and IE 6.
Micha

White Space between Objects?

Alright,
I seem to be having a problem to where there is white space between objects and no matter how many times I intersect paths I still have white-space between objects. Obviously if you are making some sort of illustration, even a pixel worth of white space could prove to be problematic. I have provided a screenshot of the problem I am receiving. I cannot move the objects together to fix this problem. May anyone please offer advice or a solution to this issue?
As you can see in the screenshot we are seeing white space between the blue and purple objects.
Any help would be greatly appreciated!
Thank you all so much!
Aaron

Thanks for this reply dougofakkad. This answer lead me to find what I was looking for...
This question and it's answers go over the problem:
http://forums.adobe.com/thread/845303
This blog post answers the problem:
http://www.sarasjodin.com/2013/06/place-objects-exactly-illustrator/
Thank you so much!

Why there is spaces between Web App module listings on a web page?

Why there is spaces between Web App module listings on a web page?
Here is the web page:
http://www.mazine.com/test/testpage.htm
And here is the CSS code:
http://www.mazine.com/test/css/tablestyle.css

I only used Photoshop for the layout. Then I created web-safe images for everything that I used for Dreamweaver. I uploaded the images to the internet and then image sourced them into the code so that they will be viewed properly in the correct circumstances. I haven't used HTML since about 2004 and I wasn't very good then. I've just been thrown back into it and I'm pretty much learning as I go. This is my second attempt because I wanted to make the newsletter more eye-catching. My first one is very basic and without a background image at all and that looks fine in pretty much all email clients. I tested it with Litmus. All except for Windows Live Mail, where the images didn't act as links but as static images. It works fine with the others I tested manually. Those being Gmail, Yahoo and AOL. I will try the display:block and get back to you. Thanks for your suggestions.

Are there any differences between black and white?

Hi, this is the question:
Are there any differences between a black and a white macbook (2,0 Ghz) except the coulor? I am thinking about buying a macbook but i dont know really what to do
Coul someone help me plz?

This page explains the differences between the two white macbooks and the black mac book: http://store.apple.com/1-800-MY-APPLE/WebObjects/AppleStore.woa/wo/0.RSLID?mco=A 4791B5D&nclm=MacBook
It should answer any questions you have about all three.
The lowest price macbook has a less fast processor, and the same size hard drive as the middle priced macbook. The lowest priced one also does not have a DVD burner while the middle priced white one does and the black one.
The black macbook has a bigger harddrive then the middle priced macbook and thats about all thats different between the middle priced white one and the black one.

White space between header and main content

Hello all! I have a 25-27px white space between my header and
main content. I read through fixes in the forum and took out any
height that would effect this gap. I still can't get rid of this
white space. Your help is greatly appreciated! Here's the Code:
<!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>
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<link href="p7hscroller/s7/p7HSM07.css" rel="stylesheet"
type="text/css" media="all" />
<script type="text/javascript"
src="p7hscroller/p7hsmscripts.js"></script>
<style type="text/css">

</style>

<script type="text/javascript"
src="slideshow.js"></script>
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<pre><span
class="style4">US-AsianMates</span><span
class="style6">.com</span> <strong><span
class="style9">JOIN FOR FREE <span
class="style7">OR</span> MEMBER LOG
IN</span></strong>
</pre>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><a href="#"
class="style16">HOME</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">ABOUT US</a></div>
</li>
<li>
<div align="center"><a href="#"
class="style16">WHY JOIN US?</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">VISA SUPPORT</a></div>
</li>
<li>
<div align="center" class="style16"><a
href="#">EVENTS</a></div>
</li>
</ul>
<pre>
</pre>
</div>
<div id="mainContent">
<div id="apDiv1"><img
src="Images/Outdoor_Bride1.jpg" alt="Bride" name="Bride"
width="525" id="Bride" /></div>
<p> </p>
<p><br>
</p>
<pre>
</pre>
<table width="200" border="1" align="left">
<tr>
<td><img src="Romantic_Kiss.jpg" alt="VISA"
name="VISASUPPORT" width="200" id="VISASUPPORT" /></td>
</tr>
<tr>
<td><img src="Surfing_At_Home.jpg" alt="JOIN"
name="WHYJOIN" width="200" id="WHYJOIN" /></td>
</tr>
</table>
<pre></pre>
<div id="apDiv3">
<div align="center">
<div align="left">
<pre class="style14"> <strong>LIVING
PROOF</strong>
<span class="style15">"12 YEARS AGO I WENT TO
THE PHILIPPINES IN HOPES
OF FINDING MY FUTURE WIFE. 11 YEARS LATER,
I AM HAPPILY MARRIED! WE ALSO HAVE AN ENERGETIC
5 YEAR OLD SON! DREAM IT, LIVE IT! IT CAN
HAPPEN TO YOU ON US-ASIANMATES.COM
CHRIS"</span></pre>
</div>
</div>
</div>
<pre> </span>
</pre></pre>
<p>
<br>
<pre>
</pre>
<div id="apDiv7"></div>
<div align="center">
<pre>
<script type="text/javascript">
// <![CDATA[
XMLFlashSlideshow_v3({swf:'slideshow.swf',w:'580',h:'140',redirect:'',usePreloader:'true', xml:'slideshow_data0.xml',preventCache:'true',disableMultipleXML:'false',initXML:'%3C?xml% 20version=%221.0%22%20encoding=%22utf-8%22?%3E%3Cslideshow%20version=%223%22%3E%3Cstyles%3 E%3CPreloader%20label=%22Loading%20%7BN%7D%2525%22%20iconColor=%22#666666%22%20iconAlpha=% 2270%22%20iconWidth=%2250%22%3E%3C/Preloader%3E%3CPreloaderLabel%20font=%22Verdana%22%20si ze=%2210%22%20color=%22#666666%22%20bold=%22false%22%3E%3C/PreloaderLabel%3E%3CBackground% 20backgroundColor=%22#FFFFFF%22%20backgroundAlpha=%22100%22%20bevelColor=%22#FFFFFF%22%20b evelStrength=%2270%22%20borderWidth=%222%22%20borderColor=%22#000000%22%3E%3C/Background%3 E%3CLoaderAnimation%20type=%22circle%22%20color=%22#FFFFFF%22%20alphaBackground=%2220%22%2 0alphaInner=%2240%22%20frameWidth=%222%22%20width=%2250%22%20height=%2250%22%3E%3C/LoaderA nimation%3E%3CDataLoader%20useAnimation=%22true%22%20useLabel=%22true%22%20labelPlacement= %22bottom%22%20fadeOutDuration=%22400%22%20textFormat=%22loader_text%22%3E%3C/DataLoader%3 E%3C/styles%3E%3Clocalization%3E%3Ctext%20orig=%22Loading%20Data...%22%20local=%22Loading% 20Data...%22%3E%3C/text%3E%3C/localization%3E%3Cfonts%3E%3Cfont%20id=%22loader_text%22%20n ame=%22Pixelade%22%20embed=%22true%22%20size=%2213%22%20color=%22#666666%22%20bold=%22fals e%22%20selectable=%22false%22%20align=%22left%22%3E%3C/font%3E%3C/fonts%3E%3C/slideshow%3E '});
// ]]>
</script>

</pre>
</div>
<pre>
</pre>
<pre> </pre>
<pre> </pre>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

"phillychris" <[email protected]> wrote in
message
news:[email protected]...
> Yep, it was the 1 pre tag creating the gap. So why is
this page a
> disaster, Tim?
Just because something is created in DW CS3 doesn't mean it's
not a
disaster, any more than using DeWalt power tools guarantees
that my
carpentry won't be a complete mess. The software is not a
replacement for
skills. It is a tool; your workflow and understanding of HTML
and CSS is
what allows you to use DW effectively.
So why did I call this page a disaster? When I see all that
extra markup,
spans, and inline tags, I shudder. It's way too hard to
troubleshoot. You're
not doing nearly enough with descendant selectors; instead,
most of your
code is inline, despite a huge CSS file.
Just one example: individual li tags with div align="center"
inside of them.
Way overkill. If you're centering all the li text in a given
list, control
it with CSS and kill all that extra markup.
E.g.
.MenuBarHorizontal li { text-align:center; }
In fact, if all there is in that .MenuBarHorizontal is the
list, you don't
even need to specify the list in the CSS. Just do:
.MenuBarHorizontal { text-align:center; }
Now you don't need div tags inside your li at all.
And if all of those a tags in that menu are going to be
.style16 class,
don't specify it on each link. In fact, don't even have a
.style 16 class.
Heck, since it's just specifying font size, you don't need to
target the a
tag at all. Just add font-size:x-small; to the
.MenuBarHorizontal ruleset I
gave you above.
The above are just examples from a quick glance at your code.
On the whole,
your markup and approach to styles are largely wasting the
power and point
of CSS.
In addition, several styles spanned onto one line of text...
a sure sign
that either you are using far too many styles to make design
sense, or else
you've got styles that overlap each other.
Here's my advice: Until you get a better handle on CSS, don't
style things
as you go. Forget styles altogether at the start. Create a
very clean HTML
markup and put ID and class selectors on things you know will
need them.
Preferably, place the HTML elements in the order you would
want your page
read if styling did not even exist, nesting elements where
necessary.
After you have created all the HTML structure, then go back
and style the
elements via CSS only. You will end up with less page weight
and far cleaner
code to decipher, not simply in terms of length but in terms
of conflicts
and redundancies.
If you're really insistent on styling things as you go, at
least do this:
don't create a new style every time you want to accomplish
something. Create
CSS rules for IDed containers and container classes. Then as
you go along
and are about to create a style, ask yourself where you are
and what all
this new rule needs to apply to. Specify the rule there,
under the selector
you've already created. Then you won't have .style1 -
.style16 like you do
now, and you won't have all that inline mess of code to sort
through.
Finally - as you create your CSS, discipline yourself to
avoid style spans.
They are necessary on the odd occasion, but very rarely.
Think semantically
(i.e. purpose of the style point you're making at a given
time).
For example, if you're tempted to create a span in order to
put something in
bold red, ask yourself: "Why?" Generally, it means you want
to place special
emphasis or strength on that. Well, in that case you don't
need a span. You
need to be using the proper tag, such as <em>
(emphasis) or <strong>. Then
you can style that tag in CSS. That way, what you have in
your page actually
makes sense apart from the style, and as a bonus you can
apply or edit your
style easily.
Tim G.
http://www.pactumweb.com
http://www.shortordersite.com
Be smart:
http://www.pactumweb.com/client/tips.php

Why are there white spaces between my images when I preview my html design on a web browser?

Similar Messages

Maybe you are looking for