Dreamweaver Specific CSS? - css

I'm using a fairly basic vertically expanding page layout in CSS, and I'm trying to adapt this layout so that my client can edit the page using templates in Dreamweaver. It's... well, rough going. I'm used to doing most of this stuff by hand, but it's working out fairly well.
I'm using a min-height trick similar to this page to get the content to expand nicely in the browser, for shorter pages viewable on large monitors. The code works perfectly in all browsers (not supporting anything older than IE7 for the site, and other browsers are fine) but Dreamweaver doesn't render the min-height properly.
I've been able to get it to work by using a .css file that only dreamweaver uses (it doesn't exist on the server) that makes it editable in dreamweaver, but if that file is committed, the magic breaks on the live site. This just feels like a dirty hack.
The quick way out, I guess, is this: is there a way to get dreamweaver to ignore a line of CSS, or to make it use a line of CSS that would be ignored by a real browser? Or, is there a way to get a min-height layout working properly in dreamweaver?
The code I'm using for this is basically the following:
Site Code:
html, body {
padding: 0px;
margin: 0px;
height: 100%;
}
body {
position: relative;
width: 100%;
height: 100%;
}
#mainFrame {
position: relative;
min-height: 100%;
width: 980px;
/*center in parent*/
margin-left: auto;
margin-right: auto;
}
and the code that makes dreamweaver happy:
html {
height: 100%;
}
#mainFrame {
height: 100%;
}
I read somewhere that Dreamweaver's layout engine was based on IE's rendering engine, which would probably explain most of the issues. I'm using CS3, and my client is using CS5, which is going to complicate things further down the line, but I'm already prepared for that. If anyone knows of a magic solution to this, I would appreciate it greatly, as I've kind of given up on it for now.
Thanks

I don't use Dreamweaver either, but this Adobe article on IE conditional comments might be relevant: I wonder if you can adjust the Dreamweaver preferences to load a conditional comment version string that would be ignored by a real browser.

i know this answer won't help.... but I personally (would) never rely on WYSIWYG-rendering.... i'm using DW CS5 myself, but only with code-view

I actually came up with my own answer for this, which is significant cheating, but it does work. The following utilized CSS comments to hide (from Dreamweaver) PHP code, which causes the server to spit out basically an empty file. Conditional comments are almost definitely a better way to do this, but it's still an interesting solution (I thought) and it might be useful to someone.
/* <?php if (false) { ?> */
body { /* some editor-only CSS */ }
/* <?php } ?> */

Related

CSS: In-page link or "anchor" doesn't allow scroll to top

When I use in-page links or "anchors" to reach a part of the page, the scrollbar doesn't allow me access to the content above -- even though it is there in the HMTL.
My site is developed in WordPress but I think the problem is more my CSS.
See the naughty
http://adanewmedia.org/submissions/#review
versus the nice http://adanewmedia.org/submissions/
Any ideas are appreciated!
Line 92 of style.css, remove this:
#main {
overflow: hidden;
}
Seems like a weird bug, or maybe you have a height set in some parent element to the #main div. Removing that style should fix it though.
Further inspection I found this (style.css line 96):
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
This is where your issues begin. Removing this nonsense fixes your original issue, but changes up the style of your site quite a bit. If you want to remove the black sidebar/footer, do that instead of pushing the containers all over the place.
When I tried playing with your code, it seemed to be this line in your style sheet that caused it - http://adanewmedia.org/wp-content/themes/twentyfourteen-child-ada/style.css?ver=3.9.1
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
Not sure what you are trying to do with that.
Also: firebug is rendering the page very oddly - I'd try validating your code as if Firebug is struggling to render the page correctly, then browsers are also likely to throw unexpected layout issues.

What are the cf:before and cf:after resets doing in responsive web design

I'm making a responsive website at the moment and im trying to work up my CSS at the moment. One thing ive noticed is a lot of sites ive looked at use:
cf:before, .cf:after {
content: " ";
display: block;
height: 0;
min-height: 0 !important;
visibility: hidden;
}
And all their elements in the responsive site use an extra class of cf which im guessing stands for clear float, even though the elements as far as i can see are not floated? Can anyone help me understand why they are being used. For instance: http://www.londonandpartners.com/
Thanks
M
There are two things you have to know about cf (clearfix) :
Clearfix Meaning and why do we use it
Clearfix Reloaded cf:before / cf:after
I think it is the best way to know why do we use it.

injecting CSS changes with chrome extension

I'm writing some custom chrome extensions to reformat certain sites. I'm having lots of luck with simply hiding things, however I've run into a problem trying to adjust a right-margin on something. Viewing the HTML results in the following:
<div id="bodyContent2" class="en">
In the styles area of the Chrome development tools I see
#bodyContent2.en {
margin-right: 330px;
min-height: 920px;
width: auto;
}
If I manually change that to margin-right: 0px; with Chrome it does exactly what I want. However, the following lines of CSS do not work when called from my manifest.json file in my extension:
#bodyContent2 {margin-right:0px;}
[id='bodyContent2']{margin-right:0px;}
#bodyContent2 .en {margin-right:0px;}
.en {margin-right:0px;}
None of them work and I don't understand why not. I literally just started working with chrome extensions today. Help is much appreciated. In the individual attempts I see the following CSS striked through in the chrome dev tools:
#bodyContent2 {
<strike>margin-right: 0px;</strike>
}
.en {
<strike>margin-right: 0px;</strike>
}
Add !important to your rules to give them higher priority:
margin-right:0px !important;
If you want to understand the order in which css rules are applied read about selector specificity.

CSS Div positioning problem in IE

I have a JQ slideshow in a div on this page:
http://www.lucky-seed.com/web.html
and have a css sheet for IE with the following style:
.slideshow { height: 599px; width: 700px;
max-width: 700px
margin-top: 00px;
margin-left: 295px;
float:left;
position: relative;
display: inline;}
Where am I going wrong? It looks great in everything but IE, but once in IE, I can't seem to move the position around no matter what I do.
Thanks in advance for your insights.
Hello fellow Pittsburgher :P
You've got so many different, conflicting styles going on there. While it's not a specific answer, might I suggest using a CSS framework like Blueprint ( http://www.blueprintcss.org/ ) to better manage your columns with greater simplicity and let it worry about IE compatibility. Rolling columns yourself is usually unnecessary these days.
In ieweb.css, try changing the margin-top on .slidenav to 50px, instead of -20px.
That moves the arrows to approximately the same place that they are in Firefox.
It might be an idea to scrap the IE specific stylesheets and do them again if need be. If you remember your question from yesterday, you had a weird issue with comments. Those comments were causing parsing errors on your pages for IE, so I imagine a lot of the "fixes" in your IE stylesheets are no longer required now you've sorted those comments.

Browser portability problems

I have a problem with my CSS on a website I'm working on.
For some reason the website's CSS works for FF 3 and IE 7 but of course MS complicates things as this doesn't work for IE 6.
The header looks squashed.
The trouble is that my client owns IE 6 and I was yelled at without knowing why.
My questions are:
Where can I get a test suite for all browsers?
How do I fix it? Can someone test it for me?
Here is the CSS for IE:
/* CSS Document */
#presentation{
position: relative;
margin: 0 auto;
width: 689px;
height: 586px;
z-index: 0;
}
#pretext{
position: absolute;
padding: 20px;
}
#cleft{
width:97px;
height:665px;
position: relative;
float: left;
}
#cright{
width:97px;
height:665px;
position: relative;
float: right;
}
Here is the html:
EDIT SO messes up with html.
Here is pastebin
Use the IETester to test it yourself :)
To solve your first problem: I'd recommend using a browser-specific style sheet.
Since you're using XHTML, you could use the following:
<!--[if lte IE 6]><link href="lte-ie-6.css" rel="stylesheet" type="text/css"><![endif]-->
The CSS file lte-ie-6.css would then only be read by IE6. You can use it to easily override other CSS that causes visual mishaps in IE6.
There is software, such as MultipleIE, Internet Explorer Collection and IETester, that can emulate different versions of IE. However, this doesn't always give accurate results. Microsoft's official answer to your last question would be: install Virtual PC and run IE6 on it.
Lately, Microsoft has been working on SuperPreview, an official website preview utility that does the same, but with reliable results. Read about SuperPreview and/or download it.
I'm afraid there is no easy answer to this problem. My advise to you is this:
Code using the smallest set of techniques you need to do what you want.
Make your code standards compliant.
Do at least some testing in each browser (+version) you need to support.
Write a letter of Complaint to Steve Balmer of Microsoft about IE. (Every self respecting web developer should do this).
Regards
Welcome to the world of browser CSS quirks. It is difficult indeed to get a nice working CSS based website that's consistent across browsers. You'll need to experiment a lot.
Sometimes you may be better off using a CSS framework like BlueprintCSS
Try viewing your site in various browsers under various platforms by using the BrowserShots service.
Multiple IE lets you easily install/run multiple versions of IE side by side.
I've had a look and one of your stylesheets set the height and width for #logopic
#logopic{
width: 50%;
height: auto;
vertical-align:bottom;}
Try the real hight and width of the image in there instead
width:699px;
height:126px;

Resources