CSS design, gap below images in IE

I'm really getting into ditching tables for CSS / divs, but
am coming up against all the browser bugs you're warned about. Some
I can fix but one that has me puzzled is where my masthead image,
within a div, looks fine in Firefox but has a couple of pixels gap
below it and the next div element below it (which will be used for
navigation). I can't show you a link as it's not live, just very
much at development stage.

Rename the page, upload it and post the link.
"Cactus Woman" <[email protected]> wrote in
message
news:eu5ha4$fi$[email protected]..
> I'm really getting into ditching tables for CSS / divs,
but am coming up
> against all the browser bugs you're warned about. Some I
can fix but one
> that
> has me puzzled is where my masthead image, within a div,
looks fine in
> Firefox
> but has a couple of pixels gap below it and the next div
element below it
> (which will be used for navigation). I can't show you a
link as it's not
> live,
> just very much at development stage.
>

Similar Messages

CSS gap below header

I have a header on a template that is showing a gap between it and the divs in the content below it. I have borders in different colors and you can see it at mojogar.com. The header has a blue line that represents a bottom border line in its CSS.
.thrColHybHdr #header {
background-color: #C9F76F;
margin: 0px;
padding: 0;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: #30F;
Right below that is a black line that is the border top of the container div for the middle section. They line up fine.
.thrColHybHdr #mainContent {
margin-top: 0;
margin-right: 13em;
margin-bottom: 0;
margin-left: 13em;
padding-top: 0;
padding-right: 1em;
padding-bottom: 0;
padding-left: 1em;
text-align: center;
position: relative;
border-top-width: thick;
border-top-style: solid;
border-top-color: #000;
But, my div inside that "mainContent" div leaves a gap (as do the side ones which I am not posting the CSS but you can see the gaps on the sides at the site). Here is the CSS for that div inside the middle section with the yellow top border.
.defFullTop {
position: relative;
width: 100%;
border-bottom-width: medium;
border-bottom-style: solid;
border-bottom-color: #ff4900;
border-top-width: thick;
border-top-style: solid;
border-top-color: #FF0;
border-right-width: thick;
border-left-width: thick;
border-right-style: solid;
border-left-style: solid;
border-right-color: #C03;
border-left-color: #C00;
Thanks!

Page looks roughly the same to me in IE7 and IE8 - a slight gap below the header.
A much bigger problem occurs if you resize browser viewport below 1280px. Everything shifts.
Overall this layout isn't working.
Related links:
Google labs - Browser Size
http://browsersize.googlelabs.com/
Open Source CSS Frameworks and Multi-Column Layouts
http://EZ-CSS.org
http://960.gs/
http://code.google.com/p/blueprintcss/
http://developer.yahoo.com/yui/grids/index.html
http://developer.yahoo.com/yui/grids/builder/
http://layouts.ironmyers.com/
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-width s
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

How to set image border with CSS Designer?

I must be missing something obvious...
I need to set an image border. I select the image. But I don't see any relevant inline style option in CSS Designer.
It only lets me change <inline style> : td but there's no option for the image.
What am I missing?
Thanks,
Leo

Thanks John,
Yes, obviously I select the image.
However, it doesn't change anything.
I don't get the "img" selector whatever choice I select it the Sources pane.
What am I missing?

Setting a background image using CSS Designer

I am trying to set a background image for a page header using the CSS Designer. When I click the browse button the Select Image Source dialog box launches but any time I click on something the dialog box closes and no changes are made. Does anyone know what is causing this?

Which DW are you using and which platform/OS, please? I am unable to reproduce this with CC2014 on OS10.9.4

CSS code completely fouled up by CSS designer

I'm having a bunch of bugs with Dreamewaver CC. Inserting images in code view or in design view always places them in the wrong place. For example inserting an image using Cmnd/Ctrl + Alt/Option + i with the cursor placed before paragraph 1 will insert the image after the last paragraph in the document or some other random place in the page. The only thing that kind of works is that the insert stays in the right div.
That's not the worst of it. I made a few edits to a fluid layout using the new CSS design panel and all of the line feeds and line breaks have dissapeared making the code extremely hard to read, troubleshoot and edit. Has anyone seen this?
Here's what the code looks like now:
@charset "UTF-8";
/* Simple fluid media   Note: Fluid media requires that you remove the media's height and width attributes from the HTML   http://www.alistapart.com/articles/fluid-images/ */
img, object, embed, video {          max-width: 95%;          margin-left: auto;          margin-right: auto;          display: block;}/* IE 6 does not support max-width so default to width 100% */.ie6 img {          width:100%;          }/*          Dreamweaver Fluid Grid Properties          ----------------------------------          dw-num-cols-mobile:                    4;dw-num-cols-tablet:                    8;dw-num-cols-desktop:          14;dw-gutter-percentage:          15;Inspiration from "Responsive Web Design" by Ethan Marcotte           http://www.alistapart.com/articles/responsive-web-design                    and Golden Grid System by Joni Korpi          http://goldengridsystem.com/*/body {                    background:#333;          }.fluid {                    clear: both;          margin-left: 0;          width: 100%;          float: left;          display: block;          }.fluidList {              list-style:none;          list-style-image:none;          margin:0;          padding:0;          }          /* Mobile Layout: 480px and below. */ .gridContainer {          margin-left: auto;          margin-right: auto;          width: 96.7391%;          padding-left: 1.6304%;          padding-right: 1.6304%;          clear: none;          float: none;}#mainHeader {          width: 100%;          border-bottom: thin dotted #666666;          background-color: #FFFFFF;} #headerHome {          width: 100%;          margin-left: 0;          } #mainTitle {          width: 100%;          margin-left: 0;          clear: both;          display: none;          }#mainNav {          width: 100%;          clear: both;          margin-left: 0;          }#mainNavList {          width: 100%;          margin-left: 0;          }.manNavBtn {          width: 48.3146%;          clear: none;          margin-left: 3.3707%;          }#sideNav {          width: 100%;          background-color: #FFFFFF;          border-bottom-right-radius: 4px;          border-bottom-left-radius: 4px;}#mainArticle {
          width: 100%;
          clear: both;
          background-color: #FFFFFF;
}#adSide {          width: 100%;          clear: both;          margin-left: 0;          background-color: #FFFFFF;}#          mainFooter {}#footer {}.zeroMargin_mobile {margin-left: 0;          }.hide_mobile {display: none;          }/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */@media only screen and (min-width: 481px) {.gridContainer {          width: 93.451%;          padding-left: 0.7744%;          padding-right: 0.7744%;          clear: none;          float: none;          margin-left: auto;          }#          div1 {}#mainHeader {          width: 100%;          border-bottom: thin dotted #666666;          }#headerHome {width: 36.464%;          margin-left: 0;          }#mainTitle {width: 61.8784%;          clear: none;          margin-left: 1.6574%;          display: block;          }#mainNav {          width: 61.8784%;          margin-left: 1.6574%;          clear: none;          float: right;          }#mainNavList {width: 100%;          margin-left: 0;          }.manNavBtn {width: 17.8571%;          margin-left: 2.6785%;          clear: none;          }#sideNav {width: 11.0497%;          }#mainArticle {width: 61.8784%;          margin-left: 1.6574%;          clear: none;          }#adSide {width: 23.7569%;          margin-left: 1.6574%;          clear: none;          }#mainFooter {}#footer {}.hide_tablet {display: none;          }.zeroMargin_tablet {margin-left: 0;          }}/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */@media only screen and (min-width: 769px) {.gridContainer {          width: 94.1149%;          max-width: 1000px;          padding-left: 0.4425%;          padding-right: 0.4425%;          margin: auto;          clear: none;          float: none;          margin-left: auto;          }#div1 {}#mainHeader {width: 100%;          }#headerHome {width: 20.6896%;          margin-left: 0;          }#mainTitle {width: 78.3699%;          clear: none;          margin-left: 0.9404%;          display: block;          }#mainNav {          width: 78.3699%;          clear: none;          margin-left: 0.9404%;          float: right;          }#mainNavList {width: 100%;          margin-left: 0;          }.manNavBtn {width: 17.2%;          clear: none;          margin-left: 1.2%;          }#sideNav {width: 20.6896%;          }#mainArticle {width: 49.5297%;          clear: none;          margin-left: 0.9404%;          }#adSide {width: 27.8996%;          clear: none;          margin-left: 0.9404%;          }#mainFooter {}#footer {}.zeroMargin_desktop {margin-left: 0;          }.hide_desktop {display: none;          }}#mainArticle img {          border: thin solid #333333;          border-radius: 6px;          -webkit-box-shadow: 0px 0px;          box-shadow: 0px 0px;          padding: 5px 5px 8px;          background-color: #E9E9E9;}
Does anyone have any ideas about how to fix this and turn it back into readable code without going through each line and looking for natural breaks?
What a mess.
Mac, OSX 10.8.4, Dreamweaver 13.0 Build 6391
NOTE: If I use something like Styleneat to clean up this code it seems to break the styles for the Mobile and Tablet layouts and causes Dreamweaver to crash every time I turn on or off the fluid grid layout display.

Does anyone have any ideas about how to fix this and turn it back into readable code without going through each line and looking for natural breaks?
What a mess.
mg, object, embed, video { max-width : 95%;
margin-left : auto;
margin-right : auto;
display : block;
.ie6 img {
width : 100%;
body {
background : #333;
.fluid {
clear : both;
margin-left : 0;
width : 100%;
float : left;
display : block;
.fluidList {
list-style : none;
list-style-image : none;
margin : 0;
padding : 0;
.gridContainer {
margin-left : auto;
margin-right : auto;
width : 96.7391%;
padding-left : 1.6304%;
padding-right : 1.6304%;
clear : none;
float : none;
#mainHeader {
width : 100%;
border-bottom : thin dotted #666666;
background-color : #FFFFFF;
#headerHome {
width : 100%;
margin-left : 0;
#mainTitle {
width : 100%;
margin-left : 0;
clear : both;
display : none;
#mainNav {
width : 100%;
clear : both;
margin-left : 0;
#mainNavList {
width : 100%;
margin-left : 0;
.manNavBtn {
width : 48.3146%;
clear : none;
margin-left : 3.3707%;
#sideNav {
width : 100%;
background-color : #FFFFFF;
border-bottom-right-radius : 4px;
border-bottom-left-radius : 4px;
#mainArticle {
width : 100%;
clear : both;
background-color : #FFFFFF;
.zeroMargin_mobile {
margin-left : 0;
.hide_mobile {
display : none;
@media only screen and (min-width:481px) {
#mainHeader { width : 100%;
border-bottom : thin dotted #666666;
#headerHome {
width : 36.464%;
margin-left : 0;
#mainTitle {
width : 61.8784%;
clear : none;
margin-left : 1.6574%;
display : block;
#mainNav {
width : 61.8784%;
margin-left : 1.6574%;
clear : none;
float : right;
#mainNavList {
width : 100%;
margin-left : 0;
.manNavBtn {
width : 17.8571%;
margin-left : 2.6785%;
clear : none;
#sideNav {
width : 11.0497%;
#mainArticle {
width : 61.8784%;
margin-left : 1.6574%;
clear : none;
#adSide {
width : 23.7569%;
margin-left : 1.6574%;
clear : none;
.hide_tablet {
display : none;
.zeroMargin_tablet {
margin-left : 0;
@media only screen and (min-width:769px) {
.gridContainer { width : 94.1149%;
max-width : 1000px;
padding-left : 0.4425%;
padding-right : 0.4425%;
margin : auto;
clear : none;
float : none;
margin-left : auto;
#mainHeader {
width : 100%;
#headerHome {
width : 20.6896%;
margin-left : 0;
#mainTitle {
width : 78.3699%;
clear : none;
margin-left : 0.9404%;
display : block;
#mainNav {
width : 78.3699%;
clear : none;
margin-left : 0.9404%;
float : right;
#mainNavList {
width : 100%;
margin-left : 0;
.manNavBtn {
width : 17.2%;
clear : none;
margin-left : 1.2%;
#sideNav {
width : 20.6896%;
#mainArticle {
width : 49.5297%;
clear : none;
margin-left : 0.9404%;
#adSide {
width : 27.8996%;
clear : none;
margin-left : 0.9404%;
.zeroMargin_desktop {
margin-left : 0;
.hide_desktop {
display : none;
#mainArticle img { border : #333333 solid thin;
border-radius : 6px;
box-shadow : 0 0;
padding : 5px 5px 8px;
background-color : #E9E9E9;

CSS Rollover Menu with Images and Current Page Indicator

Hello.
I have found a very interesting video here: http://www.youtube.com/watch?v=vv8cRYGCvIY about creating a CSS Rollover Menu with Images and Current Page Indicator (I tested it and it is working fine).
I have a web site with 15 pages based on a template and I want to use that video sample to do the same thing on my web site.
Please tell me if I can use the sample from the link above to do that.
What should I change in the css file (what new class should I make) to make this work on a web site based on a template ?
Thank You !

I don't know about that video tutorial but a sitewide persistent menu indicator ('you are here' highlighting) is very simple to do with CSS classes.
Details and code examples below:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Help with CSS Designer?

I am having a lot of trouble with the left side of CSS Designer. Sorry to sound like such a kvetch!
To take a simple example - From the Welcome screen I create a fuid grid layout and name my style sheet mystyles.css. When the document window/program opens I am seeing boilerplate.css in bold and only two selectors down below - "html, button, input, select, textarea" and "html". Why only two since the boilerplate has a huge complement of selectors?
Next question (more important) - when I click on mystyles.css a list of 16 selectors pops up, although the only one I was expecting to see was the selector for "grid container"! Why does this happen? Why doesn't Dreamweaver let me create my own selectors as I build the site? I have read that mystyles.css should contain only those style rules which I have inserted into the head of my code. Is that not true?
In general I feel that Adobe relies too much on robotic tutorials without explaining the underlying architecture. When the beginning uses starts out on his/her own, it is easy to get confused.
Please help!
Kevin from Cambridge

Please let me know if you are willing to continue with this.
That's why I'm here!
The CSS in each of those stylesheets provides the "boilerplate" layout for your fluid grid pages. Without that CSS, you would have no "fluid" and no "grid". That's why both of them contain pre-defined rules, many of which correspond to the ID's already assigned to the HTML (or the tag(s)) that is/are written on the page when it is first opened.
The contents of the @media pane are determined by the selections you made for the various widths and gutters in the New Page dialog that opened when you selected the Fluid Grid Layout option. You can adjust these as needed once they are written during this process.
So what are your further questions?

Try to browse for a background img in CSS Designer panel, and it closes the window

Using CSS Designer panel, when I try to select a background image, I use the little folder icon (browse) and when I click on my Images folder the window closes. Anyone get this result?

Hi All,
This issue has been fixed in the latest Dreamweaver CC 2014.1 update, which is now live.
We would encourage all of you to give it a try and would love to know your experience around it.
Please read this post (Dreamweaver October 2014 release is now live! Read this first.) before you proceed with the installation.
Cheers,
Subhadeep

Gap below footer...

I cannot, for the life of me, determine why I have a gap below the footer of my pages on this site. The URL is...
http://excelhr.businesscatalyst.com/index.html
My settings are as follows...
and index...
I realize the page heights are different in these shots, but that was a test I did right before I submitted this quesiton. It makes no difference. The footer is dragged to the bottom of the page, and is aligned to the red guide designating bottom of browser.
Any help would be much appreciated...
Thanks in advance.

Tried with both 'sticky footer' selected and deselected. The site is not fixed height, so without it selected one of the pages had the footer in the middle of the page. The selection made no difference on pages that did match the overall site's designated height. It still had the 10 to 20 pixel gap at the bottom.
Coincidentally, I am working with two sites right now that were doing the same thing, and the fix for both was to trun off all effects and groupings, and pull the box about 30 pixels below the 'bottom of page'. And all of my testing was being done on the master page itself, and still getting the gap, so page settings vs site settings would not have played into it.
I saw that post that discussed the sticky footer too, and tried it then.

Responsive design top logo image

I have problems with my responsive design: top logo image doesn't follow the various widths. Fex. the mobile display width or the maximum width display. I've tried to fix this by adding a srcset with tree different image sizes but that does't work either. The fluid grid template is DW:s own, it's the latest version of DW from Creative Cloud.
These are my two attempts:
<header class="fluid" id="logga"><img src="Images/Logga4.jpg" srcset="Images/logga1 300w, Images/logga2 650w, Images/logga3 1150w" alt="Logga"/></header>
and the one without srcset: <header class="fluid" id="logga"><img src="Images/Logga4.jpg" alt="Logga"/></header>
Any ideas?

See if this live example helps you. I have 3 different images -- desktop, tablet and mobile.
Alt-Web :: Fluid Grid Test #4
Relevant CSS code:
/**for desktop**/
.desktop {display:block;}
.mobile, .tablet {
    display:none;
/* Special Rules for tablets */
@media only screen and (max-width: 768px) {
    .desktop, .mobile {display:none}
    .tablet {display:block}
/* Special Rules for mobiles */
@media only screen and (max-width: 480px) {
    .desktop, .tablet {display:none}
    .mobile {display:block}
Relevant HTML code:
     <div class="gridContainer clearfix">
     <img class="banner desktop" src="http://placehold.it/1056x200/198EBA/FFFFFF&text=DESKTOP.jpg" alt="desktop image" />
     <img class="banner tablet" src="http://placehold.it/800x100/2A4D6B/FFFFFF&text=TABLET.jpg" alt="tablet image" />
     <img class="banner mobile" src="http://placehold.it/320x75/FFC000/000000&text=MOBILE.jpg" alt="mobile image" />
</div>

CSS Designer in Depth | Creative Cloud for Web | Adobe TV

Get an in-depth look at the powerful new CSS Designer tools in Dreamweaver CC. Intuitive visual editing tools help you generate clean, web-standard code and quickly apply CSS properties like gradients and box shadows. You can see the effects on your designs immediately, eliminating tedious tweaking and the need to go back and forth to Code view.
http://adobe.ly/ZSeWkr

The new CSS Designer feature in Dreamweaver CC is a very nice addition to the interface’s workflow. However, it’s not best for all workflows, whereby there should still be a non-assisted CSS editor option available, like in CS6, “without” all the new visual designer tools.
In CS6’s CSS properties editor you can quickly glance at the currently selected element’s CSS properties and directly edit the actual property values in a column format making this a very precise and straightforward workflow process.
For me, the ability to quickly edit CSS properties by clicking on respective elements in the design view editor is the biggest advantage and real power for using Dreamweaver over notepad type editors. Without this option (when working in split mode), it requires switching back and forth between different style-sheets and code view.
Though I really like everything else I’ve seen so far, in this latest version, this seemingly small feature restriction will considerably slow down my overall typical workflow process in most cases. So, until a non-assisted CSS properties editor option is available, I’ll continue using CS6. Please, please fix this soon! Hopefully this is only a short-term oversight and resolved in a very near future update.

Problem with CSS Designer in the Panels

Hello,
I have just joined Creative Cloud, I have downloaded the newest apps. In Dreamwever I cannot see the CSS Designer in the panels. After a few ours of looking for solution for this problem (all throw Internet inclusive this Forum), I have to ask you dear helpers to help me.
So, where I can find CSS Designer in the Panels? It is not on the right side, it is nowhere.
Thank you in Advance
be-designed, Slava

Dear John,
Thank you for you answer.
I lost many ours looking for what is wrong with my CC Connect, Dreamweaver... I would suggest to Adobe to put a small info on a visible place for people to know about this.
best regards
be-designed

Flash Builder 4 CSS Design Mode

Hello,
     I would like to know why CSS Design mode was removed from Flash Builder 4?
     I am a Design/Developer so it was much easier for me to use CSS in Design mode.
     What are my options? Is there any other tools for visual editing CSS for a Flex application?
Thanks

Hi Fernando, sorry for the delayed response. CSS Design Mode is not available for Flex 4 projects, but it is still available in Flex 3 projects. The reason for this is that designing components in Flex 4 is often a lot different, since it relies highly on the new spark skinning architecture. There is, however, an Appearance panel available in design view which supplies a set of the main inheriting styles. Setting these styles in the Appearance panel will result in assigning values to a global style selector.
I hope this helps,
Rob

CSS Designer problem

I am on the fifth tutorial. It was going fine at first, but now when I try to edit the properties of a selector in the CSS Designer, every time I change a value it somehow exits the properties page (and the selector) so that I have to select main.css and then select the selector I was working on (#mainnav ul) again to be able to continue editing the properties. This wasn't happening before, so I'm not sure what happened, if I inadvertently changed a setting or what. Please help! It will take me forever to do anything if I have to navigate my way back for each property I need to edit instead of being able to do it all at once.

I'm still not sure what the problem was, but quitting Dreamweaver and opening it again seemed to solve the problem. I would be great to know what the cause was, though, just in case it happens again. (Or so I don't make the same mistake again). If anyone has an idea, your thoughts would be much appreciated

List Padding in CSS Designer

I'm trying to set up an unordered list as a navigation menu using CSS Designer. I've set the list-style-type to none, but when I try to use CSS Designer to set the padding for the UL to 0px, it works initially, but when I turn Live View off and then back on, the padding returns. I know how to make this work by typing in the CSS manually, but I'm wondering if there's a way to make it work using CSS Designer.

Ah, I see what you're saying. I think that's proabably a bug.
If you turn on the little chain link in the center of the padding or margin, then type in a zero for one of the sides, it functions correctly (which is what I was doing). If you only type a zero without turning on the link first, it does nothing. As you've found, if you put something else in first, then go to zero it works correctly.
Here's the best place to report that bug...
https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform

CSS design, gap below images in IE

Similar Messages

Maybe you are looking for