Removing white line in CSS layout

Hello everyone,
I'm hoping that one of you experienced lot can help out a newbie (again!)
I've been getting to grips with CSS and building my layout with it instead of with tables, following the advice of some of you guys on here. It's going great so far, and I can see why you recommended it, but I've hit a roadblock.
At the very top of my page, in a div tag, I have my header image. Just below that, in a new div tag, I have an undefined list of words which I have arranged in a single row. Below that again, I have another image.
What I want is for each of those layers to flow from one to the other, without any white gap in the middle (my page background is white). There is no white gap between my list of words, which are on a green background, and the image below, but between the top image and the block of green background which my row of words is on, there is a white line.
I have tried everything in my limited arsenal of 'expertise', which amounts to trying margin=0 tags on the top image, and on the row of words, but no matter what I try, the white line won't go away. I've double checked to be sure and it isn't part of the image either. When you insert an image in html using src, does DW automatically add a white line underneath that you can't remove in CSS?
I can put up a screenshot if that helps?
Huge thanks in advance for anyone who can help me. This is driving my n00b mind nuts!
Best wishes all,
Jack.

For best answers here, please upload your test page & dependant files to your remote server and post a link so we can see it in our browsers. Also, please tell us which browsers you're seeing this in.
My best guess without benefit of seeing your page is that you may have some default browser margins & padding appearing around one or both images.
In code view, add an inline CSS style to your images like so:
<img style="display:block" src="image1.jpg">
<img style="display:block" src="image2.jpg">
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Can i remove white line that appears in between 2 videos when i am using video next to video

can i remove white line that appears in between 2 videos when i am using video next to video

The easiest answer would be to just get a Friskars cutter or something similar. I have one like this that I use to cut my photos apart. I found mine at a Walmart in either the scrapbook aisle or the hobby aisle.
However, if you are determined to make a custom picture package you can try making a custom layout with a text editor. I know you can control the white space amount but not sure if you can totally eliminate it.
A simple text editor will work...notepad works for this on Windows...not sure what is comparable on the mac.
In PSE3, the layouts are found following this path Adobe<Photoshop Elements 3.0<Shared Assets<Layouts...note there is also a folder titled Layouts readmes which shows the formula to edit the layouts.
Here is a link that details how to create a picture package layout using a text editor:
http://www.graficalicus.com/index.php?name=News&file=article&sid=8&theme=Printer
Caution: Make sure you save your custom layout with a new name so you don't overwrite the ones that ship with elements.

How to remove white line that appears on background of flash file when viewing in powerpoint?

When importing a swf file into powerpoint with a background colour a thin white line appears on the top of the flash movie when played in powerpoint. The white line disappears when you click onto another slide and back again, but always appears when initially playing the slide. Anyone have any ideas why this is and how to remove it?
Any help is appreciated.
Dom

Doesn't the Location Bar (URL's) also disappear in the Add-ons Tab? <br />
Separator or border used to delineate the User Interface (Toolbars) from the content area.
Contact the developer of Tree Style Tabs. If that white line doesn't appear until you click on a Tab, I would call it a Bug or glitch in that extension.

Remove white lines in contact sheet ?

Hi,
I made a contact sheet with 20 b+w images but there are really annoying white lines in a grid between the pics. I cannot find a way to remove them - short of drawing black lines over each of them. I set the spacing to 0.0 cm . My sheet is 80cm square with 20 perfect size jpgs of 20 * 16 cm each.
I am stuck . Even making a black canvas makes no difference.

What software did you use to make the contact sheet?
I assume the white lines are the image borders.

Remove white line in IWDGroup

Hello everybody,
how can I switch off the white horizontal line which appears in every design of an IWDGroup element below the header?
Is there a possibility?
Best regards,
Christian

I don't think it is possible !!
Yes, You can make visibility to none as Bharat said
Regards, Anilkumar
Message was edited by: Anilkumar Vippagunta

How do I remove a white line between cells?

I have navigation buttons setting on top of a header image. The nav buttons are in one row and the header image is in the row below it. I have all cell padding and margins set to 0 in CSS, however, I still get the thin white line between the nav buttons and the image. Is this an IE problem? Additionally, I have removed all extra spacing within the pages HTML but still to no avail. Does anyone have any expert advice on how to get rid of this thin white strip so the images will butt up together?

Understood,
Here is my HTML
<table id="outerTable" >
<tr><td valign="bottom" id="mainMenu">
    <div><img src="images/home-current.gif"/>
    <a href="screenshots.htm"><img src="images/screenshots.gif" width="80px" height="105px" border="0"/></a>
    <a href="purchase.htm"><img src="images/purchase.gif" width="80px" height="105px"/></a>
    <a href="mailto:[email protected]"><img src="images/contact.gif" width="80px" height="105px"/></a></div>
</td></tr><tr><td id="topbar"><img src="images/golfSharkTopbar.jpg" width="700" height="70" alt="Welcome to Golf Shark Online"></td>
</tr>
and here is my CSS
/* ===== outer table ===== */
#outerTable {
    margin: 0 0;
    width: 700px;
height: 200px;
background: #fff url(images/golfSharkLogo.jpg) no-repeat;
/* ===== topbar ===== */
td#topbar {
    height: 70px;
cellspacing: 0;
cellpadding: 0;
margin: -5 0 0 0
/* ===== main menu ===== */
td#mainMenu {
    height: 125px;
    vertical-align: bottom;
cellspacing: 0;
cellpadding: 0;
#mainMenu div {
    height: 80px;
    margin-left: 350px;
    padding: 0;
vertical-align: bottom;
#mainMenu img {
    margin: 0 0 -5px 0;
padding: 0;
    border: none;

Can't remove white border/line on left & top of Swiftweasel [Solved]

As the title states; I cannot remove this persistent white line/border thing at the top and left side of my Swiftweasel (Firefox) web browser. I know there must've been a post about this before but with such familiar/vague keyword combinations such as "white line border swiftweasel / firefox", etc, I couldn't find anything in the Forum or on Google except something to do with certain webpages (which in my case is on ALL pages). Here's a screenshot of what I'm talking about:
(Swiftweasel is at the top of the screen, in case you couldn't tell. See the white line/border at top/left?)
I disabled all my extensions and Stylish styles and the white line/border on top & left side are still there. This was an issue on my previous Arch installation as well (not that it has anything to do with Arch itself) but I'm just saying that it's been an issue before for me. Any ideas? It's just very annoying.
EDIT: Solved: read my last post.
Last edited by milomouse (2009-09-21 21:24:10)

Thanks for the response. As far as renaming ~/.mozilla, it kept regenerating itself each time I opened Swiftweasel, so I moved ~/.sw35 to ~/.sw000 and then opened it and there was no white line. So I went through one by one installing my add-ons again and, even though I had disabled it and restarted earlier, it turns out that if I don't install "NumExt" it wont have the white line. That's so weird that it didn't do it earlier when I disabled it. Sad, though, since I really liked that extensions. Maybe I'll see if I can edit the file somehow.

Remove CSS Comments in CSS layouts

In Stephanie Rawls article on What's new in Dreamweaver CS5 CSS layouts she mentions David Powers free extension :Stored Query to Remove CSS Comments. How do I find and download that extension?

http://foundationphp.com/tools/css_comments.php
"I loves me some Google"...

How do I remove a line in Layout?

There is a line in section text layout that I wish to either remove or move around (shown as the selected red line). But I can't seem to delete or move them once I selected it in the layout. Why? Thanks!

Thanks! It works. But if I apply the change to the section, it will wipe out all the images of all the sections... and I have a lot of images!
What's the best way to remove that line and not cause too much images? Can I do it page by page?

Remove path white lines after Live Trace

Hello,
Very new to Adobe products(CS5).....
I have created a glass orb image (no mean feat for me!!) in PS from which I would like to make a .swf file from. The plan is to convert it to an ai in Illustrator and then export to .swf.
I have opened the .psd file in illustrator and used live trace to convert to a vector. However, when I expand the resultant image is left with numerous white pathway lines that I suppose were generated by the trace. How can I remove these lines?
Any help greatly received, remembering that I am a real novice to this.
Regards,
Iain....

Thanks Scott,
I have the "Ignore White" option ticked.
I've actually found the solution. When exporting to .swf I selected "AI layers to SWF Symbols" instead of "AI file to SWF symbols". I have no idea why this sorts it though??
Thanks again for your reply.

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/

CSS Layout in DW CS 3

I'm kinda wondering why the id's are preceded with a class if
you open any of the premade CSS layouts in DW CS3.
example:
Two Columns, all widths in percent, with right sidebar header
and footer.
CSS:
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and
padding of the body element to account for differing browser
defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5*
browsers. The text is then set to the left aligned default in the
#container selector */
color: #000000;
.twoColLiqRtHdr #container {
width: 80%; /* this will create a container 80% of the
browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a
width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center
on the body element. */
.twoColLiqRtHdr #header {
background: #DDDDDD;
padding: 0 10px; /* this padding matches the left alignment
of the elements in the divs that appear beneath it. If an image is
used in the #header instead of text, you may want to remove the
padding. */
.twoColLiqRtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the
#header div will avoid margin collapse - an unexplainable space
between divs. If the div has a border around it, this is not
necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will
allow you to keep the element away from the edges of the div */
/* Tips for sidebar1:
1. since we are working in percentages, it's best not to use
padding on the sidebar. It will be added to the width for standards
compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within
it can be created by placing a left and right margin on those
elements as seen in the ".twoColLiqRtHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element
is rendered, you may occasionally run into unexplained bugs with
percentage-based columns. If you need more predictable results, you
may choose to change to pixel sized columns.
.twoColLiqRtHdr #sidebar1 {
float: right; /* since this element is floated, a width must
be given */
width: 24%;
background: #EBEBEB; /* the background color will be
displayed for the length of the content in the column, but no
further */
padding-top: 15px 0; /* top and bottom padding create visual
space within this div */
.twoColLiqRtHdr #sidebar1 h3, .twoColLiqRtHdr #sidebar1 p {
margin-left: 10px; /* the left and right margin should be
given to every element that will be placed in the side columns */
margin-right: 10px;
/* Tips for mainContent:
1. the space between the mainContent and sidebar1 is created
with the right margin on the mainContent div. No matter how much
content the sidebar1 div contains, the column space will remain.
You can remove this right margin if you want the #mainContent div's
text to fill the #sidebar1 space when the content in #sidebar1
ends.
2. to avoid float drop at a supported minimum 800 x 600
resolution, elements within the mainContent div should be 430px or
smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the
zoom property is used to give the mainContent "hasLayout." This
avoids several IE-specific bugs.
.twoColLiqRtHdr #mainContent {
margin: 0 26% 0 10px; /* the left margin should mirror the
margin on the header and footer for proper alignment. */
.twoColLiqRtHdr #footer {
padding: 0 10px; /* this padding matches the left alignment
of the elements in the divs that appear above it. */
background:#DDDDDD;
.twoColLiqRtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in
the footer will avoid the possibility of margin collapse - a space
between divs */
padding: 10px 0; /* padding on this element will create
space, just as the the margin would have, without the margin
collapse issue */
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right
in your page. The floated element must precede the element it
should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left
in your page. The floated element must precede the element it
should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or
break element and should be the final element before the close of a
container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
take a look at this
.twoColLiqRtHdr #container {
width: 80%; /* this will create a container 80% of the
browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a
width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center
on the body element. */
how do you interpret
.twoColLiqRtHdr #container?
in the code, .twoColLiqRtHdr is a class for the <body>
tag only.
So i guess I just need some enlightenment on how this CSS
works, maybe I'm used to just defining the ID of <div> tags
(ex: #wrapper {}).
Is this use for inline styles only?
what's the advantage of using this type of styles?
I hope someone can take a look at this, thank you in advance!
:)

Yeah.... I can't really see a use for class here at all. But
that's me
(and now you!)....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Thierry | www.TJKDesign.com" <[email protected]>
wrote in message
news:f0lh1l$ng$[email protected]..
> Murray *ACE* wrote:
>> I use this often when I have a single template with
variable layout
>> (i.e., section-specific layouts). You can use either
>> server-scripting or template parameters to change
the ID attribute on
>> the body tag, which will trigger an entirely
different set of CSS
>> selector assignments.
>
> FWIW, I believe it makes more sense to use an ID
attribute - as you do -
> rather than a class on "BODY" as this element is unique
through the
> document.
>
> --
> Thierry
> Articles and Tutorials:
http://www.TJKDesign.com/go/?0
> The perfect FAQ page:
http://www.TJKDesign.com/go/?9
> CSS-P Templates:
http://www.TJKDesign.com/go/?1
> CSS Tab Menu:
http://www.TJKDesign.com/go/?3
>
>

CSS layout box model?

Hi, I'm using Dreamweaver cs4. I downloaded a diablo 3
fansite kit from blizzard, and was looking at their code &
style sheets and such for reference while learning to use DIV to
layout new websites. I pretty much have the same DIV box going for
all the content in the middle. But when i click on their DIV box,
it shows margin on the left and the right, and while in design
view, automatically centers their DIV box.
I created a page, setup a div box 1000px wide, centered it,
and it does not give me a preview of it centered while in design
view, nor does it show me the margins & padding (displays
diagonal white transparant stripes where the padding & margins
goes). i made sure i clicked the "CSS Layout Box Model" in the
visual aid menu, but it does not want to work on my page, yet i can
turn it on and off on the fan site index page. How do i make it
work on my page?
Thx

Which page? Can we see the other one too?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"ZzarkZul" <[email protected]> wrote in
message
news:[email protected]...
> Heres the code for the .css document.
>
>
>
> /* Stylesheet 1 -------------------------------*/
>
> body { margin:0; font:12px Tahoma; color:#FFFFDD;
> background:url(../images/bg1.jpg) 50% 0 #170f05
repeat-x; }
>
> #ev_bg {
> background:url(../images/ev_bg1.gif) repeat-y;
> width:1064px;
> margin:auto;
> }
> #everything { width:1000px; margin:0 32px;
> background:url(../images/stone-dark.jpg); border:1px
solid black;
> border-width:0px 1px; }
>
> #header { height:162px;
background:url(../images/d3_header1.jpg) right
> no-repeat; padding:0 20px; }
> #header h1 {
> padding-top:115px;
> margin:0;
> color:white;
> }
>
> #middle { clear:both;
background:url(../images/borderb1.gif) repeat-x;
> padding:20px 10px; }
>
> #left_column { width:195px; float:left; }
> .horizontal #left_column { width:auto; float:none; }
> #navigation a { background:url(../images/button_bg1.gif)
no-repeat;
> width:170px; height:25px; display:block;
padding-left:25px; margin:5px 0;
> font-size:13px; color:white; text-decoration:none;
line-height:25px;}
> #navigation a:hover { background-position:0 bottom; }
> .horizontal #navigation a { float:left; }
> #more_information { padding-top:15px;}
>
> #middle_column { float:left; width:50%; margin:0px 20px;
> #middle_column.two_column { float:left; width:75%; }
> .horizontal #middle_column { width:auto; float:none; }
> .date_break { font-size:19px; border-bottom:1px solid
#680808;
> margin-bottom:10px; }
> .post { background:url(../images/leather-heavy.jpg);
border:1px solid
> #221100; margin-bottom:35px; line-height:18px; }
> .post h1 { background:url(../images/title_bg1.gif)
repeat-x #0d2368;
> padding:2px 10px; margin:0; font-size:15px;
color:white;}
> .post_body { padding:5px 15px; }
> .post .postedby { float:left; clear:both; }
> .post .timestamp { float:right }
>
> ul { margin:20px; padding:10px; }
> li { list-style:none;
background:url(../images/bullet.gif) 0 5px
> no-repeat;
> padding-left:30px; line-height:25px; }
> .list_left, .list_right { width:48%; float:left }
>
> .post_info { clear:both; padding-top:10px; }
>
> #right_column {
> width:26%;
> float:left;
> }
> .box { background:url(../images/leather-vdark.jpg);
border:1px solid
> #545454; margin:10px 0 25px 0; padding:10px; }
>
> #footer { clear:both; padding:20px }
> #subnav { margin:10px 0;}
> #subnav a { color:#7A0C0C; }
> #subnav a:hover { color:#E51414 }
> .copyright { font-size:10px;}
>

CSS Layout issue!! Help Urgent!!

I am having a problem with creating a css layout, in the past i used tables and am trying to convert my sites for my customers. I have layed out the website using divs and css and it looks great until i put in the cosing of the menu bar. when i put in the coding for the menu bar suddenly the bar has a padding around it but i cannot find a padding that would change this in the css coding. I need this done asap! so please help. ill show my coding below:
this is the div coding:
<div id=Nav>
   <ul class="dropdown" id="Bar"; width: 879px" name="Bar">
         <li class="style16" style="width: 161px; height: 22px">
   <a href="default.html" style="width: 146px">Home</a></li>
         <li class="style10" style="width: 169px; height: 23px">
   <a href="about.html" style="width: 153px">About</a></li>
     <li class="" style="height: 31px; width: 175px; left: 0px; top: 0px">
   <a href="Equipment.html" class="style18">
   <div class="style10" style="width: 156px; height: 20px;">
    Equipment</div>
   </a> <ul class="sub_menu">
            <li><a href="compressor.html">Air Compressors</a></li>
            <li><a href="compactions.html">Compaction</a></li>
            <li><a href="concrete.html">Concrete Equipment</a></li>
            <li><a href="forklifts.html">Fork Lifts</a></li>
            <li><a href="generators.html">Generators</a></li>
            <li><a href="groundthawing.html">Ground Thawing</a></li>
            <li><a href="heaters.html">Heaters</a></li>
            <li><a href="scissorlifts.html">Scissor Lifts</a></li>
            <li><a href="boomlifts.html">Boom Lifts</a></li>
            <li><a href="lighttowes.html">Light Towers</a></li>
            <li><a href="misc.html">Misc.</a></li>
            <li><a href="dirtequipment.html">Dirt Equipment</a></li>
            <li><a href="powertools.html">Power Tools</a></li>
            <li><a href="pumps.html">Pumps | Saws | Welders</a></li>
                 </ul>
         </li>
         <li style="width: 165px"><a href="locations.html">
   <div class="style10" style="width: 154px">
    Locations</div>
   </a>
           </li>
             <li style="width: 180px"><a href="contact.html">
   <div class="style16" style="height: 24px">
    Contact Us</div>
   </a>         </li>
        </ul>
</div>
This is the css coding:
#wrapper {
width: 880px;
margin-right: auto;
margin-left: auto;
background-color: #f4f4f4;
#Navigation {
background-image: url(Images/NAvigation%20BAr.jpg);
background-repeat: no-repeat;
width: 880px;
visibility: visible;
height: 3-px;
vertical-align: top;
Nav {
vertical-align: top;
margin: 0px;
padding: 0px;
clear: both;
height: 20px !important;
#wrapper1 {
width: 876px;
margin-right: auto;
margin-left: auto;
color: #F4F4F4;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Opera */
background-image: -o-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #716375), color-stop(1, #E8E8E8));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%);
margin-bottom: auto;
#Bar {
background-repeat: no-repeat;
width: 880px;
height: 28pt;
overflow: visible;
background-image: url(Images/NAvigation%20BAr.jpg);
position: relative;
vertical-align: top;
#container {
width: 880px;
color: #000;
background-color: #EDEDED;
dominant-baseline: 578px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Opera */
background-image: -o-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #716375), color-stop(1, #E8E8E8));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%);
margin-bottom: auto;
#content {
float: left;
color: #090;
width: 580px;
padding-right: 6px;
background-color: #033;
margin-top: 20px;
.container {
color: #000;
background-color: #ff6;
width: 876px;
#expect {
height: 164px;
width: 294px;
float: right;
position: relative;
background-color: #C90;
margin-left: 582px;
padding-top: 10px;
#hours {
float: left;
height: 55px;
width: 294px;
line-height: 4px;
word-spacing: normal;
white-space: normal;
display: inline;
letter-spacing: normal;
padding-top: 10px;
font-size: 13pt;
color: #000;
margin-left: 586px;
background-color: #F99;
#footer {
height: 76px;
width: 880px;
background-color: #CC0;
clear: both;
#cards {
float: right;
height: 31px;
width: 294px;
margin-left: 582px;
padding-top: 10px;
background-color: #F36;
#contact {
float: left;
height: 328px;
width: 293px;
word-spacing: normal;
white-space: normal;
line-height: 1px;
color: #000;
display: inline;
font-size: 14pt;
background-color: #FFF;
padding-top: 10px;
margin-top: 20px;
#header {
background-image: url(Images/Proquip%20Logo/Proquip%20logo2.jpg);
background-repeat: no-repeat;
background-position: center center;
width: 885px;
height: 126px;
background-color: #000;
margin-right: 2.5px;
margin-left: 0px;
#wrapper #container #contact p strong {
color: #800000;
font-size: 14pt;
#wrapper #container #contact blockquote p a {
color: #000;
#wrapper #container #expect div {
color: #900;
font-size: 14pt;
font-weight: bold;
#wrapper #container #hours div {
color: #900;
font-size: 14pt;
font-weight: bold;
#box2 {
background-image: url(Images/Option%201/Services/whitebox2.jpg);
#box3 {
background-image:url(Images/Option%201/Services/redbox2.jpg);
background-repeat:no-repeat;
background-position: center center;
#gold {
background-image:url(Images/Option%201/Logos/gold.gif);
background-repeat:no-repeat;
#white {
background-image:url(Images/Option%201/ProQuip-Pics/box1.gif);
background-repeat:no repeat;
#forklift {
background-image:url(Images/Option%201/ProQuip-Pics/34-01-4380.jpg);
background-repeat:no-repeat;
#scissorlift {
background-image:url(Images/Option%201/ProQuip-Pics/jlg-scissor-lifts-21.jpg);
background-repeat:no-repeat;
/* Navigation Menu- Level one */
ul {
list-style: none
ul.dropdown {
font-size: 13pt;
color: #000000;
height: 25px;
text-decoration: none !important;
width: 860px;
position: relative;
vertical-align: top;
ul#Bar.dropdown {
width: 878px;
position: relative;
vertical-align: top;
ul.dropdown li {
font-weight: 600;
float: left;
zoom: 1;
font-family: Arial, Helvetica, sans-serif;
font-size: 13pt;
display: block;
width: 175px;
color: #000000;
top: 25px;
text-decoration: none !important;
text-align: center;
ul.dropdown a:hover {
color:#cc0000;
ul.dropdown a:active {
color: #000000;
ul.dropdown li a {
display: block;
border-right: 1px solid#333;
color: #000000;
border-right-width: 1px;
text-decoration: none !important;
text-align: center;
ul.dropdown li:last-child a {
border-right:none; /* does not wotk in IE */
text-decoration:none !important; }
ul.dropdown li.hover,
ul.dropdown li.hover {
color: #000000;
position: relative;
height: 28px;
top: 0px;
ul.dropdown li.hover a {
color:#800000;
/* Level Two Navigation */
ul.dropdown ul {
width: 180px;
visibility: hidden;
position: absolute;
top: 100%;
left: 36%;
display: block;
float: left;
color: #000000;
text-decoration: none !important;
height: 25px;
ul.dropdown ul li {
font-weight: normal;
color: #000000;
border-bottom: 1px solid #ccc;
float: left;
border-bottom-color: #c0c0c0;
border-bottom-style: groove;
display: block;
background-color: #dbdbdb;
text-decoration:none !important;
/* IE 6&7 needs inline block */
ul.dropdown ul li a {
border-right: none;
display: inline-block;
height: 18px;
line-height: 16px;
color: #000000;
width: 100%;
text-decoration: none !important;
/* Level Three Navigation */
ul.dropdown ul ul {
top: 100%;
color: #000000;
text-decoration: none !important;
ul.dropdown li:hover>ul {
visibility: visible;
color: #000000;
top: 30px;
text-decoration: none !important;

I have the site using tables up and running, this is a website for a client so I cant make a test site using that domain would it be ok if I screen shot'ed the problem?
Date: Thu, 24 Apr 2014 12:19:44 -0700
From: [email protected]
To: [email protected]
Subject: CSS Layout issue!! Help Urgent!!
    Re: CSS Layout issue!! Help Urgent!!
    created by Jon Fritz II in Dreamweaver support forum - View the full discussion
Well, you're not using position:absolute, so you've got a big thumbs up from a bunch of us for that.
Is there any chance you could post a link to this page on your server? It's much easier to troubleshoot from a browser than it is to rebuild the page from code fragments.
If you haven't gone live with the page yet, create a folder called TEST in your site and save copies of the page and css there. Upload TEST and post a link to it here. Once the problem is found/fixed, delete TEST from the server.
You can also attempt to use Firefox or Chrome to find your issue by right clicking > Inspect Element. All CSS that affects a given element will be displayed with file name and line numbers there.
     Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/6327947#6327947
     Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/6327947#6327947
     To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/6327947#6327947. In the Actions box on the right, click the Stop Email Notifications link.
           Start a new discussion in Dreamweaver support forum at Adobe Community
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/thread/416458?tstart=0.

White lines showing around some of my slices (in internet explorer)

Hi,
This is my first time posting, it's an awesome forum. I've put the site up at the url below. It renders fine on my mac in firefox and safari, but on pc in explorer, it is showing white lines around some of my slices. I don't know what is the best way to correct this problem? I'm using dreamweaver CS3. (normally work in print design) I've done the slices in image ready CS2.
http://www.bulls-eyegraphics.com/
thanks,

Hi and Welcome to the DW forum.
I'm using dreamweaver CS3. (normally work in print design) I've done the slices in image ready CS2.
I'm afraid most everything you know about print design goes out the window in Web Design. Print and graphic design is rigid and static. Web design needs to remain flexible to accommodate varying amounts of text, increased text sizes, various browser and user settings.
When I increase text size in my browser, your page content becomes unreadable. This is typical of Image Ready generated code which is far too fragile for use on a real web site. Image Ready code is really only good for creating a quick design comp to show the client. Use Photoshop for graphics and slicing images. Use DW to build your HTML and CSS code.
Basic - 3-Image Slices into a CSS based Layout:
http://alt-web.com/DEMOS/Image-slices-in-a-CSS-based-layout.shtml
Advanced - Taking a Fireworks (or Photoshop) comp to a CSS based layout in DW
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
Very Nice looking design BTW. Good luck with your project,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Removing white line in CSS layout

Similar Messages

Maybe you are looking for