[css-d] Problem with float?
On this page- http://southerncommunityguide.com/dev/landing-gallery.html the first div class=sidebar (with the St. James logo) should be floated up beside the div class=gallery (big photo) but for some reason I can't get it to get up there. I have floats set but still...it won't go. Can someone spot check me and see what I'm forgetting? Thanks! Marty Martin __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] base href and CSS
I am having trouble with using the tag base href= / in my html and it not being translated into my CSS document. I have declared - base href=http://www.foo.com/bar/; / in my html head (and above the CSS declaration). The physical location of the CSS file is /assets/css/styles.css In my CSS file, I have element styles like this-- background: url(/images/foo.gif); /* this doesn't work */ background: url(images/foo.gif); /* nor does this */ If I manually change the above path to ../../images/foo.gif then it works fine, but shouldn't the CSS file be using the base href I declared? Thanks, Marty Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] negative background position for sprite
Greetz everyone,
So I have this H1 tag and I have a little graphic sprite I want to
negatively position to the left of the H1 but when I do, the sprite
gets cut off at the box border of the H1. Is there a way around that
so I can negatively position the sprite without it getting cut off?
Here's what I have (spaces added for emailing purposes)--
h1 class=mountain Front-Porch Living Is Alive and Well in the South /h1
CSS--
h1 {
font: 1.4em Georgia, Times New Roman, Times, serif;
}
.mountain {
color: #9b422d;
background: url(images/h1-mountain-arrow.png) -15px 0px no-repeat;
}
All help appreciated!
Marty Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] negative background position for sprite
This accomplished what I needed, thanks for the suggestions from everyone!
Marty
On Fri, Oct 24, 2008 at 11:56 AM, Richmond [EMAIL PROTECTED] wrote:
How about something like:
.mountain {
color: #9b422d;
background: url (images/h1-mountain-arrow.png) 0px no-repeat;
margin-left: -15px;
text-indent: 30px;
}
Cheers
Richmond
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Menu float problem
Hello everyone,
I'm having trouble with a unordered list menu. When you hover over the
link, the drop down works fine except that it is positioned at 0,0 relative
to the div instead of relative to the li (ie: directly underneath where I'm
hovering). I'm not sure what I'm doing wrong. Unfortunately the site isn't
live anywhere but here's the code I have. Maybe someone hopefully can spot
my mistake!
*CSS*
#navbar {
background: #00;
width: 960px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
border-top: 1px solid #33;
border-bottom: 1px solid #33;
overflow: hidden;
}
#navbar a, #navbar a:visited {
color: #FF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#navbar a:hover {
color: #FF;
text-decoration: underline;
}
#navbar p {
color: #FF;
margin: 0px auto 0px;
padding: 0px 0px 0px 10px;
font-weight: bold;
}
#navbarright a img {
border: none;
margin: 0px;
padding: 0px;
}
#navbarleft {
width: 680px;
float: left;
margin: 0px;
padding: 8px 0px 8px 0px;
}
#navbarright {
width: 240px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 10px 6px 0px;
text-align: right;
}
#navbar ul {
margin: 0px;
padding: 0px 0px 0px 0px;
}
#navbar li {
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navbar ul li a, #navbar ul li a:visited {
background: #22;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FF;
margin: 0px -3px 0px 0px;
padding: 7px 14px 6px 12px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
border-left: 1px solid #00;
}
#navbar ul li a:hover {
background: #33;
color: #FF;
margin: 0px -3px 0px 0px;
padding: 7px 14px 6px 12px;
text-decoration: none;
}
.current_page_item a, .current_page_item a:hover {
background: #FF !important;
color: #2255AA !important;
}
/* Marty's Playground */
#navbar ul li ul {
display: none;
}
#navbar ul li ul li {
float: none;
}
#navbar ul li ul li a {
padding: 0;
margin: 0;
}
#navbar ul li:hover ul {
display: block;
position: absolute;
left: auto;
top: auto;
padding-top: 5px;
}
#navbar ul li:hover ul li a {
display: block;
width: 10em;
border: none;
padding: 2px;
}
*HTML*
div id=navbar
div id=navbarleft
ul
li class=page_item page-item-3a
href=http://osadvantage.com/about-us/; title=About usAbout us/a
ul
li class=page_item page-item-4a
href=http://osadvantage.com/about-us/ira-kaufman/; title=Ira
KaufmanIra Kaufman/a/li
/ul
/li
li class=page_item page-item-5a
href=http://osadvantage.com/online-advantage/; title=Our
AdvantageOur Advantage/a
ul
li class=page_item page-item-15a
href=http://osadvantage.com/online-advantage/integrated-marketing-strategy/;
title=Integrated marketing strategyIntegrated marketing
strategy/a/li
li class=page_item page-item-16a
href=http://osadvantage.com/online-advantage/what-is-your-brand/;
title=What is your brand?What is your brand?/a/li
li class=page_item page-item-17a
href=http://osadvantage.com/online-advantage/our-rapid-development-delivery-process-rddp/;
title=Our Rapid Development Delivery Process (RDDP)Our Rapid
Development Delivery Process (RDDP)/a/li
li class=page_item page-item-18a
href=http://osadvantage.com/online-advantage/focused-website-strategy/;
title=Focused website strategyFocused website strategy/a/li
li class=page_item page-item-19a
href=http://osadvantage.com/online-advantage/search-engine-optimization/;
title=Search Engine OptimizationSearch Engine Optimization/a/li
li class=page_item page-item-20a
href=http://osadvantage.com/online-advantage/conversion/;
title=ConversionConversion/a/li
/ul
/li
/ul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problems with DIVs lining up
Hello everyone, I have worked on this until I'm cross-eyed. The page here- http://commonwealthentpc.com/ is using DIVs to separate the header, middle and footer content. They're the same width, etc. but are not lining up evenly. They seem to be a couple of pixels off on either side. Help! Where am I going wrong here?! Marty __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Problem with div wrapping
Hello everyone,
I am having a problem with some code. The problem is it looks fine
for me on FF and IE7 but my customer is seeing the right-hand div wrap
under the left div.
Can someone help me figure out why this is wrapping and fix it?
Thanks in advance! -Marty
The code is like this--
div id=page
div id=content
/div
div id=sidebar
/div
/div
The sidebar is wrapping under the content div.
The CSS is--
#page {
width: 770px;
margin: 0 auto;
text-align: left;
background: url(images/tile.gif) repeat-y;
}
#content {
float: left;
text-align: left;
width: 393px;
margin: 20px 0 0 52px;
padding: 0;
line-height: 1.5em;
}
#sidebar {
margin: 0 30px 0 481px;
padding: 23px 0 0 0;
font-size: 85%;
line-height: 1.4em;
color: #999;
background: url(images/sidebar_bg.gif) no-repeat 0 0;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] followup to last email
Sorry everyone, I forgot to include the URL-- http://www.fireflylightinginnovations.com/ For the problem with the div. Thanks again, Marty __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] problem with floats
If you look at http://www.urologicsurgeryonline.com/
you'll notice the content left and content right aren't floating right, the
right content is wrapping under.
Here's my CSS--
.main-navigation {display:inline /*Fix IE floating margin bug*/; float:left;
width:195px; overflow:visible !important /*Firefox*/; overflow:hidden
/*IE*/;}
.main-content {display:inline /*Fix IE floating margin bug*/; float:right;
width:535px; margin:0 5px 0 195px; overflow:visible !important /*Firefox*/;
overflow:hidden /*IE*/;}
Here's my code--
!-- B.1 MAIN NAVIGATION --
div class=main-navigationh2Contact Dr. Garvin/h2
p1802 Braeburn Drive, Suite 2130br /Salem, VA 24153br /P:
540.444.4670br /F: 540.444.4671br
/www.urologicsurgeryonline.com/div
!-- B.2 MAIN CONTENT --
div class=main-content
h1Dennis D. Garvin, MD, FACS/h1
blah blah blah
/div
Any idea what's going wrong here? The width of div.main is 755px.
Thanks,
--
Marty Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] vertical align ul within div
I am trying to vertically align a div within a div but am having problems.
Here's what I have code wise--
div id=left class=menu
ul
li class=activea href=/index.php?id=1 title=MODx CMS
Install Success Home/a/li
lia href=/index.php?id=2 title=Dennis D. Garvin, MD, FACS
Dennis D. Garvin, MD, FACS/a/li
lia href=/index.php?id=3 title=Christopher M. Hicks, MD,
FACS Christopher M. Hicks, MD, FACS/a/li
lia href=/index.php?id=4 title=Services and Procedures
Services and Procedures/a/li
lia href=/index.php?id=5 title=Patient Education Patient
Education/a/li
li class=lasta href=/index.php?id=6 title=Locations and
Directions Locations and Directions/a/li
/ul
/div
My CSS is--
.menu {
position:relative;
z-index:1000;
font-size:90%;
height: 177px;
}
.menu ul {
padding:0;
margin: auto 0;
list-style-type:none;
width:195px;
}
What do I need to do to get it to align in the middle within it's container
div? YOu can see it here-- http://www.urologicsurgeryonline.com/
Thanks!
Marty Martin
--
Marty Martin
REALTOR
m (540) 397-0014
h (540) 265-6876
f (866) 467-3759
e [EMAIL PROTECTED]
w http://blog.roanokehousehunter.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] float problem...
I'm having trouble getting div#left and div#right to float correctly. I
want them beside each other but right now they are wrapping under each other
and I can't figure where I'm going wrong with this float...help?!
Here's what I have--
.header-bottom { width:755px; background-color: #FFF; background-image:
url(../img/page-bg.gif); padding-top: 1px; color: #fff; }
.header-bottom div { height: 177px; width: 751px; margin: 0 auto;
background-color: #000c53; }
.header-bottom div #left { width: 190px; float: left; }
.header-bottom div #right { width: 560px; float: right; }
div class=header-bottom
div id=leftleft/div
div id=right
img src=images/urologic-experts-header.jpg width=560 height=177
alt=Roanoke Urology //div
/div
You can view here-- http://urologicsurgeryonline.com/
Thanks!
Marty Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] compatability problem with floating div
Hello everyone,
I've done this before but for whatever reason it ain't working now :)
I'm trying to float one div up next to the other.
You can see the code here-- http://www.mearis.com/
It looks like it should in FF but in IE6 div#right is wrapping beneath
div#left...
Any ideas?
Thanks-- Marty
The CSS looks like this--
div#container {
width: 760px;
height: 100%;
margin: 0 auto;
background-color: transparent;
}
div#left {
float: left;
width: 215px;
}
div#right {
width: 545px;
padding: 10px;
float: left;
}
__
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] vertically aligning text in a div
Hello all,
I have some code that looks like this--
style type=text/css
div.course {
padding-left: 30px;
}
div.course div.left {
float: left;
width: 150px;
font-weight: bold;
}
/style
div class=course
h3Special User Series (QT200) - ALL COURSES/h3
div class=leftAudience:/divdivIntroductory User/div
div class=leftLength:/divdiv330 minutes (5.5 hours total) – this
can be broke up into any manageable time slots to fit your schedule/div
div class=leftCourse Description:/divdivTake advantage of all 6
User Online training topics at a discounted price./div
div class=leftPrice:/divdivp style=vertical-align:
top;strong$575/strong per person/per session (a savings of $115 per
person)br /$975 per person/per session strongemwithout/em/strong a
current maintenance agreement/p/div
/div
When the div is rendered on the page though, the text in the div after
Price: is wrapping to two lines causing the word Price: to align to the
middle of it's div. How do I get Price: to align to the top of it's div?
Also, as a second question, how do I keep the text in the second div from
wrapping under the first div? I'd like it to just wrap under itself.
Thanks!!
Marty Martin
[EMAIL PROTECTED]
__
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] problem with table rows
I have a table that looks like this (shortened for email)-
table class=mapSearch
tr
td class=leftimg
src=images/google-map/house-green-white.png
width=16 height=16 alt= //td
td class=leftinput type=checkbox name=green
value=green //td
td class=leftlabel $100,000/label/td
/tr
tr
td class=leftimg
src=images/google-map/house-blue-white.png
width=16 height=16 alt= //td
td class=leftinput type=checkbox name=blue
value=blue //td
td class=leftlabel$100,000 - $199,999/label/td
/tr
/table
My styles for the table are--
table.mapSearch {
border-collapse: collapse;
margin: 0 auto;
}
table.mapSearch input {
border: 0 none;
}
table.mapSearch tr {
height: 20px;
}
When I view this in IE, the table rows seem to have the correct
height, whereas in FF they seem to have too much height. Can someone
explain to me how to get the height to display in FF like it does in
IE?
http://www.roanokehousehunter.com/
Thanks!
__
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] float problem in IE v. FF
As usual, my code works perfectly in FF but breaks in IE. I know that's a shocker to you-all. Can someone point out what I need to do to fix this? I have the following code--- div id=header div style=float: left; img src=images/headers/winter_header.gif width=560 height=150 alt=Roanoke Virginia Real Estate Listings //div div style=background-color: #009ACF; height: 101px; width: 100%;/div /div In FF the second div is moving up beside the first div as it should. In IE it isn't. See here-- http://www.roanokehousehunter.com/ Help!! marty __ 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] background color with div
Hi all,
It has been a while since I've designed much and am having a brain
fart at the moment.
I have a graphic (inside a div) that is 100px high and is positioned
absolute at left:0; top:0;. I am wanting to put a div beside the div
with graphic with a background color to stretch to the far right of
the screen so it appears to be one long banner no matter the size of
the browser for the user.
Here's what I have but it isn't working--
div#header {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
div id=header
div style=float: left;img src=images/headers/winter_header.gif
width=560 height=150 //div
div style=background-color: #009ACF; height: 101px; width:
100%;nbsp;/div
/div
How can I get that second div to stretch all the way across the screen?
Thanks!
Marty Martin
__
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] Fwd: background color with div
I'm such an idiot. I figured it out, thanks! Left the width out of the container div. Duh! Nevermind! Cheers! Marty __ 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] rounded corner problem
in IE5/win, apply the
border (no margin, padding or positioning) to the
content class and apply whatever positioning you
want to the contentWrapper class. */
.content {
margin: 0;
padding: 0;
}
.contentWrapper {
/* position this div however you want, but
keep its padding and border at zero */
padding: 0;
border: 0;
}
Thanks in advance!
--
Marty Martin
Senior Web Developer
ICONS, Inc.
Internet Development | Marketing | Support
e: [EMAIL PROTECTED]
p: 540.343.8322 | f: 540.343.0691
w: http://icn.net
__
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] div height problem
I am trying to adapt the solution found here:
http://www.quirksmode.org/css/100percheight.html but am running into
some difficulty. I have given html and body heights of 100% in my
stylesheet. When I give my container div id=x03_03 a height of 100%
though, it does not stretch the entire height of it's container div
id=03. I think maybe this is because my div#x03_03 has a style of
float: left perhaps. Can someone suggest a fix? The problem can be
seen here: http://dev.lewisgaleclinic.com/index.cfm/fa/home.css.cfm and
the container div I am referring to is the far right column that starts
with Physician's Opportunities
Here is the code in question:
div id=x03_03
!--- Physician's Guide ---
div id=x03_03_01
h3Physician's Opportunities Guide/h3
img style=float: left; margin-right: 3px;
src=#request.images#/index/spacerimg_23.jpg width=94 height=120
alt= border=0 /
p class=small333 style=float: left;A text
description of this guide for physican's opportunities can go in this
spot right here.br /a href=##...read more/a/p/div
!--- In Good Health ---
div id=x03_03_02
img src=#request.images#/index/InGoodHealth.gif
width=191 height=59 alt= border=0 /br /
img style=margin-right: 3px; float: left;
src=#request.images#/index/igh_28.jpg width=94 height=121 alt=
border=0 /
p class=small333a href=##In this issue...
Prescription Pains/abr /br /a href=##How to Stay
Stress-Free/a/p/div
/div
And the relevant styles:
html, body {
height: 100%;
}
div#x03_03 {
width: 200px;
background-color: #FDF8EA;
margin: 0;
padding: 0;
float: left;
height: 100%;
}
div#x03_03_01 {
padding: 0;
margin: 0;
background-color: #EEE;
border-bottom: 1px solid #606060;
height: 100%;
overflow: auto;
}
div#x03_03_02 {
padding: 0 0 4px 0;
margin: 0;
background-color: #FDF8EA;
border-bottom: 1px solid #606060;
height: 100%;
overflow: auto;
}
Any help much appreciated!!
--
Marty Martin
Senior Web Developer
ICONS, Inc.
Internet Development | Marketing | Support
e: [EMAIL PROTECTED]
p: 540.343.8322 | f: 540.343.0691
w: http://icn.net
__
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/
