[css-d] Scalability with bottom-stuck footer
Hello all! I'm in the process of overhauling my portfolio page, that I hastily threw together in the end-of-semester scramble for job searching (a yet-to-be-realized goal), into a scalable, compliant version. Here's the original: http://www.id.iit.edu/~colbath/ I used a fixed-width background image for the whitespace and shadows. A big no-no, I know... but it was quick (and dirty). Here's the new version: http://www.id.iit.edu/~colbath/v2/ The main problem that I'm having, is getting the div that contains the right-hand background graphic to extend the full height of the viewport. The footer is to be positioned at the bottom of the viewport, or under the content--whichever is visually lower. My CSS is here: http://www.id.iit.edu/~colbath/v2/include/styles.css Any insight *with regards to my specific problem* would be GREATLY appreciated. Thanks, -=gc=- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Retrofitting Abs positioning to work with CMS
Hello, I'm trying to retrofit a design I developed a couple of years ago (with absolute positioning) to work with a CMS--specifically, I would like to place a tools div at the top of the page. I've been trying to revise the existing design/css so that all the content will shift when the toolbar div is placed. The example page I've been working with on the redesign is http://www.id.iit.edu/~colbath/work/CMS_Typo3/1.1.0.html and the CSS is http://www.id.iit.edu/~colbath/work/CMS_Typo3/include/gcStyles2_CMS.css The classes I'm promarily dealing with are: .divBodyLow .divCrumbs .divHeadline .divNav Firefox issues: The breadcrumbs were positioning themselves just fine until I moved the logo for the page to the background, now they're offset from the top of the viewframe. The main content container (.divBodyLow) has this odd padding-issue going on, though I set no padding in the CSS. The navigation is also lower than it should be. IE issues: Oddly enough, the only problem in IE that I can see is that the navigation is set in from the left more than it should be. The design seems fine in Dreamweaver, but has the aformentioned issues in browsers. I think I can safely say that I've learned my lessons with absolute positioning, but the solution to this problem is just escaping me... Any help would be greatly appreciated. Thanks! -=gc=- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Converting design from Absolute positioning
Hello again, I'm in the process of converting a CSS from using absolute positioning to something a little more flexible, since we are trying to develop a CMS for the site, and would like the content to be a little more fluid, so we can add tools here and there. The page I'm using as a guinea pig is: http://id.iit.edu/~colbath/work/ExternalSiteRedux/Geoff/1.1.html And my CSS (so far) is: http://id.iit.edu/~colbath/work/ExternalSiteRedux/include/gcStyles2.css The only problem I seem to be having in the conversion, is the position of the main body DIV, which is out of alignment in FF and WAY out of alignment in IE. Any insight would be MUCH appreciated... Thanks! -=gc=- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Margins with nested DIVs in FF
Hey all,
I'm looking for some help with funky margin issues in FF. Amazingly
enough, IE is displaying everything just fine. Here's a link to what I'm
working on:
http://www.id.iit.edu/~colbath/StratCon06/about.html
You can see the div with the more... graphic isn't aligning with the
header div. I had to wrap all the little sidebar divs in a container to
solve some other layout issues... and now I'm getting this funky margin.
Here's the CSS I'm currently using:
#sideBarContainer {
position: absolute;
top: 100px;
left: 588px;
padding: 0 0 0 0;
}
#sideBar {
width: 117px;
height: 233px;
background-color: #d6e03c;
text-transform: uppercase;
margin-bottom: 10px;
position: relative;
}
#sideBarPast {
width: 117px;
height: 233px;
background-color: #78c2cb;
text-transform: uppercase;
margin-bottom: 10px;
}
#sideBar2 {
width: 117px;
padding: 5px;
text-transform: uppercase;
margin-bottom: 10px;
}
#sideBar3 {
width: 117px;
background-color: #78c2cb;
margin-bottom: 10px;
}
#sideBar4 {
width: 117px;
padding: 5px;
text-transform: uppercase;
background-color: #42382f;
margin-bottom: 10px;
}
Any insight would be greatly appreciated (I have a feeling there's a
simple solution to this that's just escaping me, but I can't for the
life of me figure it out...)
Thanks!
-=gc=-
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Funky Margins with FF 1.5?
Hello, I'm in the process of redoing my personal webpage in order to gear up for the big job search in the Spring, and I'm having an unusual issue that I've never encountered before. My styles work in IE but not in FF or Safari. Weird. If someone could check it out for me, and see what the mystery is, I'd really appreciate it. http://www.id.iit.edu/~colbath http://www.id.iit.edu/~colbath/include/styles.css Thanks, -=gc=- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Nested ULs as navigation
Hello, I'm trying to develop a navigation menu using nested ULs, and I'm having quite a bit of trouble. In my CSS (http://www.id.iit.edu/~colbath/Akiba/include/styles2.css), I'm using #nav ul li ul, but the #nav ul li style is overriding everything else I try to develop. If you could take a look at the CSS, and the page I'm implementing it on (http://www.id.iit.edu/~colbath/Akiba/preschool.html), and make sense of it all, I'd really appreciate it. Thanks, Geoff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Paragraph layout issue... minimum height
Hello,
I'm trying to layout a page using paragraphs and images floated to the
right. If I don't set a height for the paragraph style, then the
images will be somewhat staggered. If I set a height for the paragraphs,
then any overflow is lost, since I don't want to use scroll or
anything. And, I'd like to not have to limit the content to JUST so many
characters... so I am wondering if there's a way to set a minimum height
for a paragraph, with the option for the height to expand to accomodate
additional content?
Here's the CSS I'm using for the elements in question:
p.float {
height: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 20px;
color: #66;
display: block;
margin-top: 0px;
margin-right: 110px;
clear: left;
}
img.float {
float: right;
}
And here's the URL for an example:
http://id.iit.edu/~colbath/stuff/ExternalSiteRedux/Geoff/1.1.1.html
Thanks,
-=gc=-
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] List styling... FF vs. IE
Hello,
I'm trying to style lists in a site I am developing, with some of the
li components being links, and some being plain text. Since I don't
want to deal with adding spans all over the place, I am replacing the
bullet with a square red dot. It renders fine in FF, but looks pretty
bad in IE. I've tried looking around for other solutions, but I'm coming
up short. Any suggestions would be appreciated.
Here's the CSS:
ul.squareNoIndent {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 20px;
color: #66;
margin: 0px 0px 15px 0px;
padding: 0px;
list-style-position: inside;
list-style-image: url(../images/red_sqare_dot.gif);
}
And here's a URL to a page using the style. Note the position of the
bullet between FF and IE.
http://www.id.iit.edu/~colbath/stuff/ExternalSiteRedux/Geoff/2.2.html
Thanks,
-=gc=-
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Partial dissapearing borders in IE
I'm trying to convert a table/graphical layout to a CSS/HTML layout, and
I'm having a little difficulty with making IE render things properly. I
have a box that outlines a search form, and a little sidebar floated to
the right of it. It seems like the search form (which, unfortunately, is
still a table) isn't clearing the floated div sidebar, unless I try and
mess with the width of the sidebar, in which case the border of the
containing div dissapears--but only around the floated div.
Here's the relevant code from my CSS:
div#commBody div.divRedBoxNotes {
display: block;
margin-bottom: 25px;
padding-left: 5px;
}
div#commBody div.divRedBoxNotes table.textBody {
clear: none;
}
div#commBody div.divRedBoxNotes div.sideBarNoBorder {
border-left: 1px dashed #CC;
margin-top: 10px;
margin-bottom: 10px;
height: 127px;
padding-left: 10px;
}
And here's a link to the page in question (works fin in browsers besides
IE):
http://id.iit.edu/~colbath/stuff/ExternalSiteRedux/Geoff/4.4.html
Any help would be greatly appreciated...
Thanks,
-=gc=-
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS rollOver/swapImage problem
Hello,
I'm trying to implement a CSS-driven rollOver/swapImage effect, and it
works fine in browsers such as FF and Mozilla, but not in IE. I followed
the turorial available here:
http://www.meyerweb.com/eric/css/edge/popups/demo2.html and I viewed in
in IE 6.0.2900...etc..., where it worked fine.
The URL for the page I'm developing is:
http://id.iit.edu/~colbath/stuff/ExternalSiteRedux/Geoff/1.2.1.html
The CSS I'm using to achieve this feat is:
div.divRedBox a img.hidden {
height: 0;
width: 0;
border-width: 0;
}
and:
div.divRedBox a:hover img.hidden {
height: 140px;
width: 140px;
position: absolute;
top: 15px;
left: 413px;
}
I checked on the tutorial page, and there was no mention of a fix for
IE, and I viewed the code, and there were no hacks to make it work in
IE... at least none that I recognized.
Any help would be appreciated.
Thanks,
-=gc=-
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
