Style: margin, added to the P tag in Contribute 3

Similar Questions

• Decrease the space between the < p > tags

  Does anyone know a good way to decrease the amount of space between paragraphs? I tried to reduce the margin down to the p tag, but it does not work. I have to create a special class and apply it on the paragraphs in question? Any help is greatly appreciated.

  You are welcome.  I assume that this question has been answered.

  Nancy O.
  ALT-Web Design & Publishing
  Web | Graphics | Print | Media specialists
  http://ALT-Web.com/
  http://Twitter.com/ALTWEB

• RH9: How can I get a CSS class or id defined style applies to Word or PDF output using the < div > tags?

  HR I wrote the following:

  

  This is the code-behind:

  

  The 'DivNote' CSS id is defined:

  

  However, when I generate the printed output, I get this:

  

  The style of the Note disappeared.

  I created a class = "Note"...:

  

  .. .and applied to the div tag with similar results, but with some of the style through:

  

  The output HTML (.chm) seems, like the display of the preview (Ctrl + W).

  Your help is appreciated gracefully.

  Steve Roehrig

  In RoboHelp you map to a Word template or simply by selecting a CSS?

  I assume that you are by selecting a CSS and that the solution might be to map to a Word template, where you can map the. Note the style.

  Mapping to take word longer to set up the first time, but once done, you may be easier to get the desired results.

  See www.grainge.org for creating tips and RoboHelp

  

  @petergrainge

• Added 2 styles of paragraphs on the same page

  Do not know how...

  I have an HTML form on a page who picks up a different stylesheet with p {margin: 0 ;}}  then the default stylesheet of my site has p {margin: 0 0 20px ;}}

  So when I add as a page, my text without margins, no line breaks. I tried to put < style p = "" margin: 0 0 20px; "> for the text outside of the shape, but nothing happens."

  The text outside of the shape is in a class of div... My question is can I define a style of p in this div? Or y at - it another way to do it?

  Excellent.

  It would be good if you could now mark as answered correctly so that people who don't have no need to keep clicking on it.  Thank you!

  --

  E. Michael Brandt
  
  www.divahtml.comwww.divahtml.com/products/scripts_dreamweaver_extensions.phpStandards-compliant scripts and Dreamweaver Extensions
  
  www.valleywebdesigns.com/vwd_Vdw.aspJustSo PictureWindowJustSo PhotoAlbum, et alia
  
  --
  

• You can control when the styles are added on your style sheet?

  I would like to have css files organized in a certain way for the ease of use and DW sometimes join the end and sometimes add to the middle.

  It is quite easy to organize styles in CSS designer. There are several aspects:

  • When a selector is already selected in the pane of selectors, by clicking on the button "+" to create a new selector inserts the new rule of style immediately after the selected one.
  • If you want to move the selectors in your stylesheet, you can drag and drop them in the Panel of selectors. The style rules will be moved to the new location in the style sheet.
  • You can even move a different style sheet style rules. Select the styles that you want to move and begin to drag. Keep the mouse button while dragging on the @Media pane and then drag the style selected on the stylesheet to target in the Sources pane.
  • To adapt a style rule existing for use in a media query, right click on the selector and choose duplicate in the query on the shortcut menu. You can then select the media query in the submenu that appears.

• Disorder by selecting the Div tags

  Hello

  Im trying to create a website portfolio for me but I'm having trouble with the selection of some div tags, I added to my page.

  

  As you can see here the top right divtag is selected/clicked on illustrated by give it a blue box around it. It allows me to add a rollover image to which is what I try to do with home' 'info' and 'contact' buttons shown above right. However when I click on or around the div tags that hold these buttons I can't "select" them so that the blue box appears around the edge and therefore impossible to add the rollover image.

  This is the encoding of the page, if it helps (I) normally work in the design window, I have not been taught in the coding

  < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

  " < html xmlns =" http://www.w3.org/1999/xhtml ">

  < head >

  < meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"

  < title > Untitled Document < /title >

  < style type = "text/css" >

  {#wrapper}

  float: none;

  Width: 1500px;

  margin: auto;

  }

  {#p1}

  float: left;

  height: 350px;

  Width: 490px;

  margin left: 15px;

  top of the margin: 15px;

  background-image: url(images/testp1.jpg);

  }

  {#p4}

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  margin left: 15px;

  background-image: url(images/testp2.jpg);

  }

  {#p5}

  Clear: none;

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  margin left: 15px;

  background-image: url(images/testp3.jpg);

  }

  {#p6}

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  background-image: url(images/testp1.jpg);

  }

  {#p2}

  background-color: #333;

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  background-image: url(images/testp2.jpg);

  }

  {#p3}

  background-color: #999;

  float: left;

  height: 350px;

  Width: 490px;

  right margin: 15px;

  top of the margin: 15px;

  background-image: url(images/testp3.jpg);

  }

  {#p7}

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  margin left: 15px;

  background-image: url(images/testp3.jpg);

  }

  {#p8}

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  margin left: 15px;

  background-image: url(images/testp1.jpg);

  }

  {#p9}

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  background-image: url (images/Logo1 - Tile.jpg);

  }

  {#home-btn}

  background-color: #999;

  float: left;

  height: 30px;

  Width: 30px;

  margin-top:-715px;

  margin left: 15px;

  background-image: url(images/home.jpg);

  }

  {#contact-btn}

  float: left;

  height: 30px;

  Width: 30px;

  margin-top:-625px;

  margin left: 15px;

  background-color: #FF6;

  background-image: url(images/contact.jpg);

  }

  {body

  left margin: 0px;

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  }

  {#info-btn}

  background-color: #09F;

  float: left;

  height: 30px;

  Width: 30px;

  margin left: 15px;

  margin-top:-670px;

  background-image: url(images/info.jpg);

  }

  < / style >

  < / head >

  < body >

  < div id = 'wrapper' >

  < div id = "p9" > < / div >

  < div id = "p8" > < / div >

  < div id = "p7" > < / div >

  < div id = 'p6' > < / div >

  < div id = "p5" > < / div >

  < div id = "p4" > < / div >

  < div id = 'p3' > < / div >

  < div id = "p2" > < / div >

  < div id = "p1" > < / div >

  < / div >

  < div id = "contact-btn" > < / div >

  < div id = "info-btn" > < / div >

  < div id = "Home-btn" > < / div >

  < / body >

  < / html >

  Any ideas?

  Cheers, Ryan

  I normally work in the design window that I've not been taught in the coding

  You will learn about code regardless if you make the effort. Start with these links:

  http://w3schools.com/

  http://www.csstutorial.NET/

  DW assumes that you have knowledge of HTML & CSS code.

  If you cannot or will not work with the code, you use the wrong tool.

  For the non-codeurs, Adobe offers 2 other options: Adobe Muse & portfolio

  Nancy O.

• Problem with the text in the div tag

  Hey there,

  the question that I have is that every time that I add text to a div tag and press 'enter' to start on another paragraph, the text on the first paragraph right guard moved down to about a paragraph. It happens in Dreamweaver and the browser when available is presented as a preview. I have included a few pictures below, please advise.

  First added text, which seems fine:

  

  But when I try to type the text after pressing "enter".

  

  I want the text to align to the top instead of from a paragraph down. Something like this (made in InDesign):

  

  I will include the code as well. When I select the div tag, it's what is highlighted in the code pane:

  < div id = "about6" >

  < p > Hey there < /p >

  < p > Hey there 2 < /p >

  < p > Hey there 3 < /p >

  < p > Hey there 4 < /p >

  < / div >

  A screenshot of the of type parameters for this div:

  

  Any help would be appreciated. Thank you.

  Paragraphs, titles etc. have legacy browser style rules.

  We can remove the style by adding rules to the top of the stylesheet

  * {

  padding: 0;

  margin: 0;

  }

  Even better is to include a CSS reset set of rules such as found here http://meyerweb.com/eric/tools/css/reset/

  By the way, please note that the use of identifiers will limit your fun by using style rules. You should not use ID unless needing a single login. In your case, I would use a class.

  Heights of adjustment are also going to strangle the natural flow of your document, especially if you intend to start on the drawings of fluid

  I hope this helps.

• How to add a background outside the body tag

  Hi I have a html site normal I want to add a background outside the body tag, IE outside the main content and on the display window.

  

  Thank you

  And complementary:

  Give your #container background #fff (white) and a padding-about 200 px background color.

  The padding-bottom generates a white background for the 3 labels and footer.

  My example shows the problem on a green background.

  

  Edit your styles.css file:

  {body

  do-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  Color: #000;

  font-size:62.5%;

  line-height: 1.5em;

  background-image: url ("your_gradient_bg.png");}

  ...

  ...

  ...

  #container {}

  Width: 1024px;

  Auto margin: 0;

  padding-bottom: 200px;

  background-color: #fff ;}

• the div tags not included inside of div tags attributes

  I create a new site using DIVs for the first time. I have a div that includes a class called container for everything for the page. There is no error in the code.

  Inside of this, I have a div for the header, a main content div, and a div for the sidebar. Each also contains a class style. They are all certainly contained in the opening tags and closing div for the .container.

  However, the color that I've assigned to the background in the container div only applies to the header. Other class styles do not have assigned colors and display the page background color, not the color of the container.

  When I select the container div, it selects only the part of the page header and does not include the main content or the sidebar. I suppose that what I have done wrong is something simple, but have no idea how solve this.

  I hope I included enough information that someone will be able to help me with this. I spent an hour on this issue! :-)

  Thank you

  Marcy

  Are the sidebar and MainContent divs fluttered side-by-side like this?

  Header

  MainContent Sidebar

  If so, you are experiencing margin collapse caused by 2 floats in the parent container.  To resolve this problem, add overflow: hidden to the CSS of the parent container.

  . Container {}

  overflow: hidden;

  }

  Nancy O.

• Cannot delete the XML tag

  Hi all! Working in InD CS6 in Windows 7.

  I have a XML element in a document that I can't do anything with and who does not appear to be associated with what in the file of the InD. The red line is pointing to it on the Panel Structure in the image below. Note the X through its icon.

  

  The XML is added to the InD file by mapping tags to styles using the Load... button on the dialog box map tags to Styles and 'import' of another document of the InD.

  When right clicking this item in the Structure of Panel and selecting go to point the current selection goes, but then nothing else happens. Or to delete this in the Panel of Structures . I had a similar problem, a bit a go where I somehow finished with elements in the XML file that were not associated with what anyone in the document. Had those text display in the Structure Panel after the name as shown above, but, even once, go at them will not anywhere. I hadn't studied at the time because I could simply remove it from the structure.

  With this element, however, I can't get rid of it without marking not any frame.

  So, I guess I really questions. It's this thing! How the hell he get there? And is there a better way to remove it rather than not tagging any of the frame and have to re - mark all content.

  EDIT: Just found out that using the trash on the pallet Structure to remove the parent of the problematic element, indeed, removes as problematic. Before him, I was just not marking the parent who has transferred only the problem child (like these word games) for the previous parent.

  Thanks for reading this way-too-long-post.

  All the best,

  Ken

  OK (he said with a blush to cheeks) I get noticed something in common, I didn't before posting.

  Page to which cchimi kindly provided a link described icon as a part empty, and it is attached to an empty block. However, it is not only an empty block.

  What happened in our file, is that the script containing the tag with an anchor marker tag xml that InD apparently do not like much. Type of logic, really.

  Now, I may be cracking, but with a single instance of the element of 'bad' I thought THAT I could see the empty element in the story discovers with the anchor to a few characters on. I selected the anchor and dragged back between the start and end code and icon of the item has changed and he returned 'alive', I was able to handle it. For most other troublesome elements, however, sinpy AND marking a marker of the anchor, the XML tag does NOT display in story mode. The element gets the empty icon when you simply tag the anchor marker, in this case it is an anchor for a rule.

  Hope this might help someone, someday.

  Thanks again for reading.

• CF extra addition &lt; html &gt;, &lt; head &gt; and the &lt; body &gt; tags pages

  I had problems with my titles not appearing is not on my pages of CF. Finally, I looked at the source of the page in the browser and found that CF is the extra insertion < html >, < head > and < body > tags at the beginning of the pages. (see examples below). I'm sure it's the CF engine that did this because I took a cfm page and just change the extension of html and everything worked fine (except the CF code). There is no additional tag inserted and the titles appear. I also noticed that the CF engine seems to be adding the first line <! DOCTYPE HTML... >

  Does anyone know why this might be happening?

  Thank you

  David

  SEE Page - notice of the additional tags in red

  <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional / / BY" > ".

  
  <html >

  <head >

  <title >without title < /title >

  < /head >

  
  <body >

  
  
  < /body >

  < /html >

  <html>

  <head>

  
  " <style type="text/css"> ".

  <!--

  
  BODY
  {
  make-weight: normal;
  do-size: 10pt;
  do-family: Arial;
  background-color: white;
  text-decoration: none
  }

  
  

  Same page with the extension changed to html - code is a little different because the style sheet has not loaded because it uses a cfinclude
  

  <html>

  <head >

  
  " <cfinclude template="fdp_style_sheet.html"> ".

  
  " <meta http-equiv="Content-Type" content="text/html; charset = iso-8859-1"> " "

  <title >connection < /title >

  
  "<script type="text/javascript"> ".

  If ($_SERVER ["HTTPS"]! = "on")
  {
  header ("Location: https://".) $_SERVER ['HTTP_HOST']. ($_SERVER ["REQUEST_URI"]);
  Exit();
  }
  < /script >

  
  "<script language="JavaScript" src="webbug.js">< /script > " "

  < /head>

  
  "" <body onload= "writeBug();" marginHeight= "0" ' marginWidth do= '0' > ' "

  Take a look at your file Application.cfm or Application.cfc, you have probably the code in there (Application.cfc/cfm works first on each page request)

• Image in the div tag

  Hello Dreamweavers.

  IM placing an image in my div tag and trying to style it with css, just to see what CSS has really cos Im new.

  IM adding the background image on the Center, but his only is not all the div, the leash of shadows

  on the left and right, so how can I place an image to occupy any of the div tag?

  Thank you.

  

  I disagree with what Kenneth has recommended. He uses Flash to resize a background to the size of the viewport.

  Here are some tips:

  If you use a background image: url("..) (' / images/background.jpg "); in your CSS, the div will not develop to the background fill the div. So, if you have an image you want to show in a div (and don't want other images and text to sit on it, the best way to do so is not to set the image as a background.

  If you do not want the image in the background, and you want the div to be the same size as the image file, you must determine the dimensions of the image and make the height and the width to your equal to the div.

  The other way is to have your CSS resize your background to fill a div with a predefined size. If you follow these steps:

  {#mydiv}

  Width: 860px;

  height: 700px;

  background-image: url("..) (' / images/background.jpg ");

  background-size: 100% 100%;

  }

  This before you set the size of your div and make your background image to fill this div. If your background is close to the sheer size of the div, it will look like very well, but if you're stretching a background a lot smaller than your div, you can see a few grain. In this case, the use of Photoshop to aperture this context can be a good idea.

• White space between the Div tags

  I use DW CS4.  I need to help, reducing the white space between the DIV tags  I have the white space between smaller gray line and my nav bar.  I see all the places where there are margins or padding.  Can anyone help?  Here's the code.  Thank you.

  < body bgcolor = "#CCCCCC" onload = "MM_preloadImages('..)." /_img/HOMEover.jpg ',' /_img/COMPANYover.jpg ','... / _img/PROJECTOR TSover.jpg ', '... CASE STUDIESover.jpg/_img / ','... / CONTACTUSover.jpg/_img ') ">"

  < div id = "container" >

  < div align = "left" >

  "" < p > < img src = "... / _img/Nute_Logo_tag_060612.gif" alt = "logo" name = "logo" width = "113" height = "74" hspace = "5" align = "absbottom" id = "logo" / > < / p >

  < / div >

  < div id = "header" > < / div >

  < div id = "content" > < / p >

  < table border = "0" cellpadding = "0" cellspacing = "0" >

  < b >

  "" "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ('down', "group1', 'bluebar',", 1) ' onmouseover = "MM_nbGroup ('over', 'bluebar',","1)" onmouseout = "MM_nbGroup ('out')" > < img src = "... / _img/bluebarup.jpg" alt = "" name = "bluebar" width = "118" height = "15" border = "0" id = "bluebar" onload = "" / > < /a > < table >

  "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ('down', "group1', 'Home',", 1) ' onmouseover = "MM_nbGroup ('more', 'Home','... / _img/HOMEover.jpg ',", 1) "onmouseout ="MM_nbGroup ('out')"" > < img src = ""... / _img/HOMEup.jpg ' alt = "Click HOME to go to the home page" name = "home" width = "115" height = "15" border = "0" id = "home" onload = "" / > < /a > < table >

  "< td > < a href =" "javascript:;" target = "_top" onclick = "MM_nbGroup ("down"," group1', 'society', ", 1) ' onmouseover =" MM_nbGroup ('more', 'society', "..") " "(/ _img/COMPANYover.jpg', '', 1)' onmouseout ="MM_nbGroup ('out')"> < img src ="... / _img/COMPANYup.jpg "alt ="Click to go to our services COMPANY"name ="company"width ="122"height ="15"border ="0"id ="company"onload =" "/ > < /a > < table >"

  "< td > < a href =" "javascript:;" target = "_top" onclick = "MM_nbGroup ("down","Group 1","projects",", 1) ' onmouseover = "MM_nbGroup ('more', 'projects',..." "(/ _img/PROJECTSover.jpg', '', 1)' onmouseout ="MM_nbGroup ('out')"> < img src ="... / _img/PROJECTSup.jpg ' alt = 'PROJECTS click to see our projects' name = 'projects' width = "122" height = "15" border = "0" id = "projects" onload = "" / > < /a > < table > "

  "" "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ('down', "group1', 'studies',", 1) ' onmouseover = "MM_nbGroup ('more', 'studies,'... / _img/CASE STUDIESover.jpg',", 1) "onmouseout ="MM_nbGroup ('out')"> < img src ="... / _img/CASE STUDIESup.jpg "alt ="click on the CASE STUDIES to see examples of projects' name = "added" width = "150" height = "15" border = "0" id = "added" onload ="" / > < /a > < table >

  "" "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ("bottom", "group1', 'contactus',", 1) "onmouseover =" MM_nbGroup ('more', 'contactus','... / _img/CONTACTUSover.jpg ', ", 1)" onmouseout = "MM_nbGroup ('out')" > < img name = "contactus" src = "... / _img/CONTACTUSup.jpg" border = '0' alt = "" onload = "" / > < /a > < table >

  < /tr >

  "< / table > < img src =" "alt =" "name ="mainphoto1"width ="780"height ="264"id ="mainphoto1"/ >

  Thank you for all your help.  I solved it by adding a padding to my header (grey line).

• Need a script for marginal elements consists of two tags

  Hello world

  I need a script for the marginal elements with two paragraph tags. Object styles, library items are all available for this work. My requirement is to cut two paragraph tags and put it in the library and also using styles of both object elements. Is this possible? Can help you to do this. For more information, I have attached this file also.

  Waiting for your answer...

  Hi try this code...

  main();
  main() {} function
  If {(app.documents.length!=0)}
  {if(App.Libraries.Length!=0)}
  myStyleDialog();
  }
  else {}
  Alert ("Please open library.");
  }
  }
  else {}
  Alert ("Please open a document and try again.');
  Exit (0);
  }
  }

  function myStyleDialog() {}
  var myLabelWidth = 120;
  var myParaStyleNames = myGetParagraphStyleNames();
  var myObjStyleNames = myGetObjectStyleNames();
  myDialog = app.dialogs.add var ({name: "Choose the Styles instead of anchoring"});
  {with (MyDialog.dialogColumns.Add ())}
  {with (borderPanels.Add ())}
  {with (dialogColumns.Add ())}
  {with (dialogRows.Add ())}
  {with (dialogColumns.Add ())}
  staticTexts.add ({staticLabel: "choose paragraph Style1:", minWidth:myLabelWidth});})
  }
  {with (dialogColumns.Add ())}
  myParaStyleDropdown1 = dropdowns.add ({stringList:myParaStyleNames, selectedIndex:0});})
  }
  }
  //---------
  {with (dialogRows.Add ())}
  {with (dialogColumns.Add ())}
  staticTexts.add ({staticLabel: "choose paragraph Style2:", minWidth:myLabelWidth});})
  }
  {with (dialogColumns.Add ())}
  myParaStyleDropdown2 = dropdowns.add ({stringList:myParaStyleNames, selectedIndex:0});})
  }
  }
  //----------
  ~ {with (dialogRows.add ())}
  ~ {with (dialogColumns.add ())}
  ~ staticTexts.add ({staticLabel: "Object Styles:", minWidth:myLabelWidth});})
  //~                             }
  ~ {with (dialogColumns.add ())}
  ~ myObjectStyleDropdown = dropdowns.add ({stringList:myObjStyleNames, selectedIndex:0});})
  //~                     }
  //~         }
  }
  }
  myReturn = myDialog.show ();
  if(myReturn == true) {}
  myParagraphStyle1 = myParaStyleNames [myParaStyleDropdown1.selectedIndex];
  myParagraphStyle2 = myParaStyleNames [myParaStyleDropdown2.selectedIndex];
  myObjectStyle = myObjStyleNames [myObjectStyleDropdown.selectedIndex];
  myDialog.destroy ();
  }
  else {}
  myDialog.destroy ();
  }
  }
  }
  function myGetParagraphStyleNames() {}

  
  var myStyleNames = app.documents.item (0).paragraphStyles.everyItem () .name;
  Return myStyleNames;
  }
  ~ function myGetObjectStyleNames() {}
  ~ var myObjStyleNames = app.documents.item (0).objectStyles.everyItem () .name;
  ~ return myObjStyleNames;
  //~ }

  //----------------------------------------------
  myDoc var = app.activeDocument;
  var myDoc.stories = monarticle;
  var myParas, myCount = 0;
  myLib var = app.libraries [0];
  var AnchorItemName = prompt ("Enter the name of library point exactly", "", "anchor point");

  for (i = 0; i
  {
  myParas = .paragraphs [i] monarticle;
  If (myParas.length > 3)
  {
  for (j = 0; j
  {
  firstPara var = myParas [j];
  var nextPara = myParas [j + 1];
  var firstParaStyle = firstPara.appliedParagraphStyle.name;
  var nextParaStyle = nextPara.appliedParagraphStyle.name;
  If ((nextParaStyle == myParagraphStyle2) &&(firstParaStyle == myParagraphStyle1))
  {
  myText = myLib.assets.item (AnchorItemName) .placeAsset (firstPara.insertionPoints [0]) [0];
  firstPara.move (LocationOptions.after, myText.insertionPoints [0]);
  nextPara.move (LocationOptions.after, myText.insertionPoints [-1]);
  myText.fit (FitOptions.frameToContent);
  myCount ++;
  } //End If
  } //End of iteration Para
  } //End of If paralength > 2
  } //End of iteration history
  Alert ("Found and dealt with Occurrences" + myCount);

  --------------

  Green4ever

• How to get rid of the space between the div tags in Safari?

  Hello.  I'm designing a website with CSS and there is a space appears between two divs seen in Safari, but not in IE (the space appears between the header at the top tag and the container below. I spent hours trying to solve this problem, without success, and I am really frustrated. I am new to DW and not very good at code, so if someone can please shed a light on how to solve this problem, I would be very grateful.

  I have attached the page in question. Any help much appreciated!

  R

  I hate this rule since it removes the default margins of everything.  But you're definitely on the right track.  What is happening is that the margins by default of the first and the last tag in the DIV does NOT collapse as it should and is pushing out.  You can fix this in a number of ways, including the way you suggested.  Another way would be to complete some padding the divs, or a border for the divs, or just set the margins on these specific tags (those in the divs) to zero.  For example, try this code with and without the style sheet embedded in Safari-

  
  

  Test

  
  

  Test