Removing White Space Around Header - from CSS?
What is causing the white space around the header and
above/below the top nav bar? There's also an extra white pixel
space between each of the buttons on the top nav bar.
See;
http://home.roadrunner.com/~phenline/products/prods_models_9_10_07.html
I've also attached the CSS stylesheet.
I thought it might be a valign tag but they are all in the
main text and are necessary to glue the 3 main sections just under
the top nav bar. I couldn't find any vspace or hspace options in
the code.
Because of the rollovers on the top blue horizontal nav bar,
I need the "class" option in each <td> tag. Otherwise, if I
put the class="navMain" option on the <tr> tag, then the
whole nav bar will show the rollover color. Or, I suppose I could
create 5 different CSS styles for each nav button ???
Any ideas? Thank you.
HI, for first you should to revrite tables to DIV, or you can
correct this with a CSS code for the table:
for example you shold to check the background color to the
same:
.x {
background-color: #3766c8;
for more example about Table CSS styling you can check a good
wizard:
http://www.somacon.com/p141.php
Titti
http://textures.z7server.com/
Similar Messages
-
Extra White Space Around Header Graphic & NavBar
I have a header graphic and Navigation Bar (rollover images)
positioned inside a table. Unfortunately, there is about 1-2 pixels
of white space on the left, right, and top of the header graphic.
Same with the NavBar--there's 1-2 pixels of white space on the
edges (left & right sides). By default, cell padding for the
table is set to zero. If cell padding is set to zero, why am I
seeing white space between the edge of the graphic and the edge of
the table?
You can see what I'm referring to here:
http://newstartinvestment.com
What is causing this extra white space, and how do I get rid
of it?On 26 Mar 2007 in macromedia.dreamweaver, csbridges wrote:
> I have a header graphic and Navigation Bar (rollover
images)
> positioned inside a table. Unfortunately, there is about
1-2 pixels
> of white space on the left, right, and top of the header
graphic.
> Same with the NavBar--there's 1-2 pixels of white space
on the edges
> (left & right sides). By default, cell padding for
the table is
> set to zero. If cell padding is set to zero, why am I
seeing white
> space between the edge of the graphic and the edge of
the table?
>
> You can see what I'm referring to here:
>
http://newstartinvestment.com
(Btw, I
> don't like the yellow rollovers--they'll be removed
shortly.)
>
> What is causing this extra white space, and how do I get
rid of it?
Personally, I thought that the white border was a feature,
but... In
addition to the cellpadding, add cellspacing:
<table width="780" border="0" align="center"
cellpadding="0"
cellspacing="0" bordercolor="#000000" bgcolor="#FFFFFF">
Joe Makowiec
http://makowiec.net/
Email:
http://makowiec.net/contact.php -
How to remove white spaces from XML content using Coldfusion?
Hi,
Can anybody help me in removing white spaces in between the tags from the below XML content using coldfusion?
XML content:
<?xml version="1.0" encoding="UTF-8"?> <chart showdates="true" today="08/12/2009"> <phases> <phase color="CCFFCC" name="Funded"/> <phase color="CDCD67" name="Concept"/> <phase color="99CCFF" name="Feasibility"/> <phase color="0099FF" name="Development"/> <phase color="0099FF" name="Development"/> <phase color="CC99FF" name="Close-out"/> <phase color="909090" name="Sustaining"/> </phases><program name=""> <project enddate=" 30/03/2007 " id="43250" startdate=" 28/02/2006 "> <version enddate=" 30/03/2007 " number=" 1" startdate=" 28/02/2006 "> <phase color="CCFFCC" currentdate="23/03/2006" name="Project Start" plandate="28/02/2006" type="phase"/> <phase color="99CCFF" currentdate="04/04/2006" name="Feasibility Closure" plandate="31/05/2006" type="phase"/> <phase color="0099FF" currentdate="29/03/2007" name="Commercialization" plandate="30/12/2006" type="phase"/> <phase color="CC99FF" currentdate="30/03/2007" name="Project Closed" plandate="30/03/2007" type="phase"/> <phase color="909090" currentdate="" name="Obsolescence" plandate="" type="phase"/> </version> </project> </program> </chart>
Output I am expecting is like below,
<?xml version="1.0" encoding="UTF-8"?><chart showdates="true" today="08/12/2009"><phases><phase color="CCFFCC" name="Funded"/><phase color="CDCD67" name="Concept"/><phase color="99CCFF" name="Feasibility"/><phase color="0099FF" name="Development"/><phase color="0099FF" name="Development"/><phase color="CC99FF" name="Close-out"/><phase color="909090" name="Sustaining"/></phases><program name=""><project enddate=" 30/03/2007 " id="43250" startdate=" 28/02/2006 "><version enddate=" 30/03/2007 " number=" 1" startdate=" 28/02/2006 "><phase color="CCFFCC" currentdate="23/03/2006" name="Project Start" plandate="28/02/2006" type="phase"/><phase color="99CCFF" currentdate="04/04/2006" name="Feasibility Closure" plandate="31/05/2006" type="phase"/><phase color="0099FF" currentdate="29/03/2007" name="Commercialization" plandate="30/12/2006" type="phase"/><phase color="CC99FF" currentdate="30/03/2007" name="Project Closed" plandate="30/03/2007" type="phase"/><phase color="909090" currentdate="" name="Obsolescence" plandate="" type="phase"/></version> </project></program></chart>
Thanks in advance,
Regards,
Manoz.Daverms,
Thanks for the quick turn around..
I have applied the solution what you suggested above (<cfprocessingdrirective suppresswhitespaces="yes"), still whitespaces are existing in my output.
The output what I am getting is,
(blue color part is my output & red color indicates whitespaces)
<?xml version="1.0" encoding="UTF-8"?>
<chart showdates="true" today="09/12/2009">
<phases>
<phase color="CCFFCC" name="Funded"/>
<phase color="CDCD67" name="Concept"/>
<phase color="99CCFF" name="Feasibility"/>
<phase color="0099FF" name="Development"/>
<phase color="0099FF" name="Development"/>
<phase color="CC99FF" name="Close-out"/>
<phase color="909090" name="Sustaining"/>
</phases>
<program name="">
<project enddate=" 01/01/2010 " id="12059" startdate=" 20/06/2003 ">
<version enddate=" 01/01/2010 " number=" 1" startdate=" 20/06/2003 ">
<phase color="CCFFCC" currentdate="20/06/2003" name="Project Start" plandate="20/06/2003" type="phase"/>
<phase color="CDCD67" currentdate="" name="Concept Closure" plandate="" type="phase"/>
<phase color="99CCFF" currentdate="20/06/2003" name="Feasibility Closure" plandate="20/06/2003" type="phase"/>
<phase color="F0FF00" currentdate="" name="Alpha Test" plandate="" type="milestone"/>
<phase color="F0FF00" currentdate="26/07/2004" name="Beta Test" plandate="31/05/2004" type="milestone"/>
<phase color="0099FF" currentdate="29/06/2005" name="Commercialization" plandate="08/12/2004" type="phase"/>
<phase color="CC99FF" currentdate="24/02/2006" name="Project Closed" plandate="01/01/2010" type="phase"/>
</version>
<subproject enddate=" 16/10/2008 " id="11809" name="espWatcher Pricing Toolkit" startdate=" 01/08/2003 ">
<version enddate=" 16/10/2008 " number=" 1" startdate=" 01/08/2003 ">
<phase color="CCFFCC" currentdate="01/08/2003" name="Project Start" plandate="01/08/2003" type="phase"/>
<phase color="99CCFF" currentdate="" name="Feasibility Closure" plandate="" type="phase"/>
<phase color="0099FF" currentdate="15/06/2005" name="Commercialization" plandate="08/12/2004" type="phase"/>
<phase color="CC99FF" currentdate="16/10/2008" name="Project Closed" plandate="16/10/2008" type="phase"/>
</version>
</subproject>
<subproject enddate=" 31/12/2070 " id="35704" name="espWatcher version 2 (2005)" startdate=" 01/01/2005 ">
<version enddate=" 31/12/2070 " number=" 1" startdate=" 01/01/2005 ">
<phase color="CCFFCC" currentdate="01/01/2005" name="Project Start" plandate="01/01/2005" type="phase"/>
<phase color="99CCFF" currentdate="01/07/2005" name="Feasibility Closure" plandate="01/07/2005" type="phase"/>
<phase color="0099FF" currentdate="31/03/2006" name="Commercialization" plandate="31/03/2006" type="phase"/>
<phase color="CC99FF" currentdate="31/12/2070" name="Project Closed" plandate="31/12/2070" type="phase"/>
</version>
</subproject>
</project>
</program>
</chart>
However this solution removes most of the whitespaces, I want exact output as flash file is expecting so..
Where ever I am calling the CF functions, there I am getting the whitespaces. like below cases.
startdate="#getProjectStartDate(sProjectIdList)#" -> output I am getting for this statement is -> " 12/09/2009 "
Please assist me...
Regards,
Manoz. -
When Importing Images, How Do I Remove The White Space Around The Corners?
When Importing Images, How Do I Remove The White Space Around
The Corners?u may use magic wand (and magic wand setting) from Lasson
Tool to select and delete that white space, but u must break a part
to the picture first. -
Unable to remove the redundant group header from the bottom of page
Hi,
In one of my projects in I am facing a problem.
I need to display the details of all available products of the company. While displaying the details, I need to group the products based on some criteria (like type of product, release date) and the grouping is upto 4 level grouping. Grouping criteria can se said as, I need to firstly group all the products based on the type, then on the Release Date and then on two of the client specific values on the Product.
Along with this, the view of product details is a thumbnail view (Image on top with all details below that line after line) due to which I need to display multiple (5) products in one row.
The problem which I am facing is:
The most important criterion for the customer is that there should not be any wastage of space.
Secondly, they also donu2019t want to see partial data like only the header data in one page and the Product related Data (Image and Info) on the next page.
In my case, when first page has insufficient space for the next grouped products, it simply displays the group header on the first page. On the second page, it again displays the group header along with the data.
For reference, images are available at:
Image1: http://farm4.static.flickr.com/3454/3224626688_aa3cfb8236_m.jpg
Image2: http://farm4.static.flickr.com/3373/3224626782_0501cf566f_m.jpg
My requirement is to remove the redundant group header from the first page as it does not make sense without having any data below it.
I have tried the following options:
1. I tried to apply setting "Keep Group Together" on the group and "Repeat Group Header On Each Page". But when I apply this, when my second group has more than 5 products (two rows of data) and space on first page can accommodate only 1 row of data, it moves the data on to the second page instead of keeping the 1st row on first page and 2nd on second page. This solution is not acceptable to the customer as it wastes space.
2. If I remove setting "Keep Group Together" on all the groups, but keep the "Repeat Group Header On Each Page" and remove the "Keep Object Together" in the details section, I can save space. But this is not acceptable to the user as it leaves dangling headers (Orphaned Header Information).
Need some pointers to overcome this issue as it is very critical for me.
Thanks in advance,
Vibhav AgrawalThanks Raghavendra for your reply.
These solutions provided on the link are not useful for me because of the peculiar layout of my report.
In my report I am supposed to show details of multiple items (upto 5/6) in a single row.
All solutions suggest about adding additional header (below group header) and use the formula to use that header to put the data for initial first object and details section for the subsequent objects.
But, since i need to display multiple items in same row...and data cannot be set as 'format with multiple columns' in the header, hence this solution does not work for me
Thanks,
Vibhav Agrawal -
Help!! Why is there a black part in the X when I try to delete my app? It's covering up the supposed to be white space around the X button
Try:
- Reset all settings
Go to Settings > General > Reset and tap Reset All Settings.
All your preferences and settings are reset. Information (such as contacts and calendars) and media (such as songs and videos) aren’t affected.
- Restore from backup. See:
iOS: How to back up
- Restore to factory settings/new iOS device.
If still problem, make an appointment at the Genius Bar of an Apple store since it appears you have a hardware problem.
Apple Retail Store - Genius Bar
Since they all line up on the left site that could be a hardware problem or maybe a software glitch. I have never seen that problem posterd here before -
Does removing white space in code lower SWF size?
Hi --
I am working on a Flash project where file size optimization
is critical. I
am curious if removing white space from the code (which
lowers the size of
the AS file) will reduce the size of the finished SWF or if
the Flash
compiler already does this?
Thanks
RichHey --
Thanks for the response. Based on some minimal testing I have
done I think
you are correct.
Rich
"benjiemoss" <[email protected]> wrote in
message
news:ggjjtd$krh$[email protected]..
> I'm fairly certain that it makes no difference, the
white space is only
> there for authoring.
>
> Happy to be corrected though if I'm wrong... -
Hello,
I am embedding videos into an HTML page and they show up with
a big white space around the player. Is there a way I can get rid
of this white space so the videos are neatly contained in only the
space of the actual video and controls?
Thanks
FionaCan u show hoe you have embeded your code?
this may happen due to incorrect size. Please check the Flash
Width and height and your HTML tag -
Is there any way to get rid of the white space around an image. A lasso?
Do you mean the wide gutter? The default for all graphics inserted or dragged & dropped into a Pages document is 12 points. You can use the wrap inspector to either turn off the wrap or decrease the gutter?
If you want to make the background transparent, take a look at a recent thread starting here. -
How to remove white space between two answer reports
How to remove white space between two answer reports
In Dashboard section I have 2 rqeuest. Each request renders Table View. When I display dashboard, it show white space separating the 2 table views. How do I get rid of the white space/white band ?See this link
Re: Eliminating the space between two reports in OBIEE dashboard page Section
Regards,
Sandeep -
Remove white space nodes from jtree
I am trying to create jtree using XML DOM.
But I m not able to remove/ignore the white space elements from DOM.
I am getting output something like this
for example
Server
Text
node1
Text
I want something like this.
Server
node1
I tried all option for removeing the white space
Here I am posting the source
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.FactoryConfigurationError;
import javax.xml.parsers.ParserConfigurationException;
import org.xml.sax.SAXException;
import org.xml.sax.SAXParseException;
import java.io.File;
import java.io.IOException;
import org.w3c.dom.Document;
import org.w3c.dom.DOMException;
// Basic GUI components
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTree;
// GUI components for right-hand side
import javax.swing.JSplitPane;
import javax.swing.JEditorPane;
// GUI support classes
import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.Toolkit;
import java.awt.event.WindowEvent;
import java.awt.event.WindowAdapter;
// For creating borders
import javax.swing.border.EmptyBorder;
import javax.swing.border.BevelBorder;
import javax.swing.border.CompoundBorder;
// For creating a TreeModel
import javax.swing.tree.*;
import javax.swing.event.*;
import java.util.*;
public class DomEcho02 extends JPanel
// Global value so it can be ref'd by the tree-adapter
static Document document;
static final int windowHeight = 460;
static final int leftWidth = 300;
static final int rightWidth = 340;
static final int windowWidth = leftWidth + rightWidth;
public DomEcho02()
// Make a nice border
EmptyBorder eb = new EmptyBorder(5,5,5,5);
BevelBorder bb = new BevelBorder(BevelBorder.LOWERED);
CompoundBorder cb = new CompoundBorder(eb,bb);
this.setBorder(new CompoundBorder(cb,eb));
// Set up the tree
JTree tree = new JTree(new DomToTreeModelAdapter());
// Iterate over the tree and make nodes visible
// (Otherwise, the tree shows up fully collapsed)
//TreePath nodePath = ???;
// tree.expandPath(nodePath);
// Build left-side view
JScrollPane treeView = new JScrollPane(tree);
treeView.setPreferredSize(
new Dimension( leftWidth, windowHeight ));
// Build right-side view
JEditorPane htmlPane = new JEditorPane("text/html","");
htmlPane.setEditable(false);
JScrollPane htmlView = new JScrollPane(htmlPane);
htmlView.setPreferredSize(
new Dimension( rightWidth, windowHeight ));
// Build split-pane view
JSplitPane splitPane =
new JSplitPane( JSplitPane.HORIZONTAL_SPLIT,
treeView,
htmlView );
splitPane.setContinuousLayout( true );
splitPane.setDividerLocation( leftWidth );
splitPane.setPreferredSize(
new Dimension( windowWidth + 10, windowHeight+10 ));
// Add GUI components
this.setLayout(new BorderLayout());
this.add("Center", splitPane );
} // constructor
public static void main(String argv[])
if (argv.length != 1) {
System.err.println("Usage: java DomEcho filename");
System.exit(1);
DocumentBuilderFactory factory =
DocumentBuilderFactory.newInstance();
//factory.setValidating(true);
//factory.setNamespaceAware(true);
try {
DocumentBuilder builder = factory.newDocumentBuilder();
document = builder.parse( new File(argv[0]) );
makeFrame();
} catch (SAXException sxe) {
// Error generated during parsing)
Exception x = sxe;
if (sxe.getException() != null)
x = sxe.getException();
x.printStackTrace();
} catch (ParserConfigurationException pce) {
// Parser with specified options can't be built
pce.printStackTrace();
} catch (IOException ioe) {
// I/O error
ioe.printStackTrace();
} // main
public static void makeFrame() {
// Set up a GUI framework
JFrame frame = new JFrame("DOM Echo");
frame.addWindowListener(
new WindowAdapter() {
public void windowClosing(WindowEvent e) {System.exit(0);}
// Set up the tree, the views, and display it all
final DomEcho02 echoPanel =
new DomEcho02();
frame.getContentPane().add("Center", echoPanel );
frame.pack();
Dimension screenSize =
Toolkit.getDefaultToolkit().getScreenSize();
int w = windowWidth + 10;
int h = windowHeight + 10;
frame.setLocation(screenSize.width/3 - w/2,
screenSize.height/2 - h/2);
frame.setSize(w, h);
frame.setVisible(true);
} // makeFrame
// An array of names for DOM node-types
// (Array indexes = nodeType() values.)
static final String[] typeName = {
"none",
"Element",
"Attr",
"Text",
"CDATA",
"EntityRef",
"Entity",
"ProcInstr",
"Comment",
"Document",
"DocType",
"DocFragment",
"Notation",
// This class wraps a DOM node and returns the text we want to
// display in the tree. It also returns children, index values,
// and child counts.
public class AdapterNode
org.w3c.dom.Node domNode;
// Construct an Adapter node from a DOM node
public AdapterNode(org.w3c.dom.Node node) {
domNode = node;
// Return a string that identifies this node in the tree
// *** Refer to table at top of org.w3c.dom.Node ***
public String toString() {
String s = typeName[domNode.getNodeType()];
String nodeName = domNode.getNodeName();
if (! nodeName.startsWith("#")) {
s += ": " + nodeName;
if (domNode.getNodeValue() != null) {
if (s.startsWith("ProcInstr"))
s += ", ";
else
s += ": ";
// Trim the value to get rid of NL's at the front
String t = domNode.getNodeValue().trim();
int x = t.indexOf("\n");
if (x >= 0) t = t.substring(0, x);
s += t;
return s;
* Return children, index, and count values
public int index(AdapterNode child) {
//System.err.println("Looking for index of " + child);
int count = childCount();
for (int i=0; i<count; i++) {
AdapterNode n = this.child(i);
if (child.domNode == n.domNode) return i;
return -1; // Should never get here.
public AdapterNode child(int searchIndex) {
//Note: JTree index is zero-based.
org.w3c.dom.Node node =
domNode.getChildNodes().item(searchIndex);
return new AdapterNode(node);
public int childCount() {
return domNode.getChildNodes().getLength();
// This adapter converts the current Document (a DOM) into
// a JTree model.
public class DomToTreeModelAdapter
implements javax.swing.tree.TreeModel
// Basic TreeModel operations
public Object getRoot() {
//System.err.println("Returning root: " +document);
return new AdapterNode(document);
public boolean isLeaf(Object aNode) {
// Determines whether the icon shows up to the left.
// Return true for any node with no children
AdapterNode node = (AdapterNode) aNode;
if (node.childCount() > 0) return false;
return true;
public int getChildCount(Object parent) {
AdapterNode node = (AdapterNode) parent;
return node.childCount();
public Object getChild(Object parent, int index) {
AdapterNode node = (AdapterNode) parent;
return node.child(index);
public int getIndexOfChild(Object parent, Object child) {
AdapterNode node = (AdapterNode) parent;
return node.index((AdapterNode) child);
public void valueForPathChanged(TreePath path, Object newValue) {
// Null. We won't be making changes in the GUI
// If we did, we would ensure the new value was really new,
// adjust the model, and then fire a TreeNodesChanged event.
* Use these methods to add and remove event listeners.
* (Needed to satisfy TreeModel interface, but not used.)
private Vector listenerList = new Vector();
public void addTreeModelListener(TreeModelListener listener) {
if ( listener != null
&& ! listenerList.contains( listener ) ) {
listenerList.addElement( listener );
public void removeTreeModelListener(TreeModelListener listener) {
if ( listener != null ) {
listenerList.removeElement( listener );
// Note: Since XML works with 1.1, this example uses Vector.
// If coding for 1.2 or later, though, I'd use this instead:
// private List listenerList = new LinkedList();
// The operations on the List are then add(), remove() and
// iteration, via:
// Iterator it = listenerList.iterator();
// while ( it.hasNext() ) {
// TreeModelListener listener = (TreeModelListener) it.next();
* Invoke these methods to inform listeners of changes.
* (Not needed for this example.)
* Methods taken from TreeModelSupport class described at
* http://java.sun.com/products/jfc/tsc/articles/jtree/index.html
* That architecture (produced by Tom Santos and Steve Wilson)
* is more elegant. I just hacked 'em in here so they are
* immediately at hand.
public void fireTreeNodesChanged( TreeModelEvent e ) {
Enumeration listeners = listenerList.elements();
while ( listeners.hasMoreElements() ) {
TreeModelListener listener =
(TreeModelListener) listeners.nextElement();
listener.treeNodesChanged( e );
public void fireTreeNodesInserted( TreeModelEvent e ) {
Enumeration listeners = listenerList.elements();
while ( listeners.hasMoreElements() ) {
TreeModelListener listener =
(TreeModelListener) listeners.nextElement();
listener.treeNodesInserted( e );
public void fireTreeNodesRemoved( TreeModelEvent e ) {
Enumeration listeners = listenerList.elements();
while ( listeners.hasMoreElements() ) {
TreeModelListener listener =
(TreeModelListener) listeners.nextElement();
listener.treeNodesRemoved( e );
public void fireTreeStructureChanged( TreeModelEvent e ) {
Enumeration listeners = listenerList.elements();
while ( listeners.hasMoreElements() ) {
TreeModelListener listener =
(TreeModelListener) listeners.nextElement();
listener.treeStructureChanged( e );
}DocumentBuilderFactory can be configured to ignore white space.
http://java.sun.com/j2se/1.5.0/docs/api/javax/xml/parsers/DocumentBuilderFactory.html#setIgnoringElementContentWhitespace(boolean) -
How do I remove the white space around a graphics I have placed?
I am working on a pc.
I have placed a graphic into my document that has a white box around it.
I would like to get rid of the white box so only the graphic is seen.
How do I accomplish that?wasenthay,
If it is a raster image, this is best done in Photoshop, where you can just erase the white pixels (Magic Eraser or something). Without Photoshop, you will have to Image Trace to get a vector rendering which you may expand and then get rid of the white path/part, or to draw round the coloured parts and create a Clipping Mask or similar.
If it is vector artwork, you should be able to just delete the white path(s)/part(s). -
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">
<!--
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;
.oneColElsCtrHdr #container {
width: 46em; /* this width will create a container that will
fit in an 800px browser window if text is left at browser default
font sizes */
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. */
.oneColElsCtrHdr #header {
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-color: #FFFFFF;
.oneColElsCtrHdr #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: 0px 0; /* using padding instead of margin will
allow you to keep the element away from the edges of the div */
.oneColElsCtrHdr #mainContent {
background: #FFFFFF;
padding-top: 0;
padding-right: 0px;
padding-left: 0px;
.oneColElsCtrHdr #footer {
padding: 0 10px; /* this padding matches the left alignment
of the elements in the divs that appear above it. */
background:#DDDDDD;
.oneColElsCtrHdr #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: 0px 0; /* padding on this element will create
space, just as the the margin would have, without the margin
collapse issue */
.style4 { font-family: "Fiolex Girls", "Arial Narrow";
color: #FF0000;
font-size: xx-large;
font-style: italic;
.style6 {color: #FF0000}
.style7 { color: #000000;
font-size: x-small;
.style9 {color: #FF0000; font-family: Arial, Helvetica,
sans-serif; }
-->
</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv1 {
position:static;
width:525px;
height:250px;
z-index:1;
float: left;
border-bottom-color: #000000;
border-bottom-style: solid;
border-top-width: thin;
border-bottom-width: thin;
border-color: #000000;
#apDiv3 {
position:static;
width:500px;
height:0px;
z-index:1;
left: 465px;
top: 410px;
float: right;
.style14 {
font-size: medium;
font-style: italic;
font-weight: normal;
.style15 {font-size: small}
-->
</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">
<!--
#apDiv7 {
position:static;
width:737px;
height:0px;
z-index:2;
bottom: 0px;
border-bottom-style: solid;
border-bottom-width: thin;
.style16 {font-size: x-small}
-->
</style>
<!-- Do not remove the line below!!! It is required for
the XML Flash Slideshow v3. -->
<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><!-- end #header -->
</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><!-- end #mainContent -->
<br>
<pre>
</pre>
<div id="apDiv7"></div>
<div align="center">
<pre><!-- Begin XML Flash Slideshow v3 -->
<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>
<!-- End XML Flash Slideshow v3 -->
</pre>
</div>
<pre>
</pre>
<pre> </pre><!-- -->
<pre> </pre>
</div>
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</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 -
Removing white space after Spry Menu Bar...
I having a bit of a problem trying to remove a little white space after my Spry Menu bar, when I set it to 8.6em theres a little white space, when I set the width to 9.7 it goes too far, I changed it to 137 pixels, however in Firefox and IE, it messes up the layout.
Also what do you do if there a different browsers, where some layouts are out of place, do you need to detect the browser with JS?The website is not live yet, everything is stored locally so heres the code: -
HTML: -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="website_style.css" />
<title>My Website</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="banner"></div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a> </li>
<li><a href="#">Personal Profile</a></li>
<li><a href="#">Education</a> </li>
<li><a href="#">Work Experience</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Additional Info.</a></li>
<li><a href="#">Referees</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
CSS: -
@charset "utf-8";
/* CSS Document */
body{
background-size:auto;
background-repeat:no-repeat;
background-color:#967255;
padding: 5px;
#wrapper {
width:968px;
background: #FFF;
padding-left:0px;
padding-right:0px;
overflow:hidden;
height: auto;
border-top-left-radius:20px;
border-top-right-radius:20px;
margin:0 auto;
#wrapper #banner {
background-image:url(banner.gif);
height: 100px;
width: 968px;
margin-left: auto;
Spry Menu CSS: -
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
font-family: abeatbyKai;
height: auto;
background-image: url(../paper.gif);
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8.68em;
float: left;
height: 3em;
margin-top: 0;
margin-right: 0;
margin-bottom: 0em;
margin-left: 0;
padding-top: 0;
padding-right: 0em;
padding-bottom: 0;
padding-left: 0px;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
color: #333;
text-decoration: none;
background-image: url(../paper.gif);
padding-top: 0.5em;
padding-right: 0.75em;
padding-bottom: 1.5em;
padding-left: 0.75em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF; -
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/
Maybe you are looking for
-
How to move the script from one env to another
Hi I have a database where i have two schemas. 1)Owner and 2) User . User schema contains all synonyms for the objects present in Owner schema and the application will connect to user schema only. Now i have 2 script files 1) create tables in the own
-
Found a bug? Adding alot of resources to a task creates a local resource on the server.
Hi Guys, I'm working with a client on building a Project Server 2013 environment and I came cross something that struck me as odd. I hope some of you will be able to reproduce the issue and maybe point me into the direction of a hotfix or a report th
-
No image preview in Twitter for ipad?
I updated my Twitter app v. 5.12 yesterday, and although the app on my iphone 5S now shows the image previews, the ipad app does not. In fact, the ipad has no "Image Previews" setting as the iPhone does. Is this an oversight, or intentional for som
-
Release Skype to Go number to use with different p...
I have a skype to go number that I use to take business calls when at the computer or to divert when I am out of the office. I have now moved into an office with a landline. Is there any chance that I can get skype to release my number so that I can
-
Totally confused! I just want to make one connection.
I have an iMac G5 and my wife a MacBook. She wireless and me connected to same Airport by ethernet. I want her to be able to back up to an external drive hooked to my iMac, so all I want is to set it up that she can mount this volume and back up to i