Re: [css-d] IE mac bugs
On 2/8/07 6:55 AM, jeffrey morin [EMAIL PROTECTED] wrote: it's weird. when i view it online it looks ok but when i just view it locally on my imac the content column gets hung up. so if anyone looks at this and it's not working please let me know what you think is going on. thanks!! http://www.melissagerstein.com/ie_mac_bugs.html It looks fine to me in Mac IE 5.2. -- Diane __ 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] Links with separator lines
I use #page_links and .footerbar for links. The problem shows on this page
http://www.entourage.mvps.org/
but
show OK on this page (and other pages on the site that use the same divs)
http://www.entourage.mvps.org/exchange/index.html
The Problem:
In Opera and FireFox on the Mac, I'm seeing two separator lines after the
first link.
IE 5.2 on the Mac shows the separator lines inside the link or way to one
side in both #page_links and #footer. There are other problems with IE Mac
that I'll address in a separate subject.
Safari Mac and OmniWeb Mac are OK for both page links and footer links.
On the PC side there is no problem with the separator lines for IE 6. I'm
seeing space after the first link Search A-Z Index. I'm guessing this is a
padding issue. I haven't been able to test in other PC browsers yet. Have
been downloading Opera and Firefox and the rate they are going it's going to
be hours just to download. Running VPC isn't what you would call swift.
My first thought was to check for some extraneous code but there is none
that I see. I don't understand why it works on other pages and not the home
page. I can see that IE Mac would be problematic but for other browser to
have a problem with just this one page is confusing.
CSS
---
#page_links {text-align: center;
margin-top: 1.5em;
}
.linksbar {
list-style-type: none;
padding:4px 0;
}
.linksbar li {
display: inline;
border-left: 1px solid #00;
font-size: .8em;
padding: 0 1px 0px 3px;
}
.linksbar li.first {
border:none;
}
.footerbar {
list-style-type: none;
padding:4px 0;
}
.footerbar li {
display: inline;
border-left: 1px solid #00;
font-size: .8em;
padding: 0 1px 0px 3px;
}
.footerbar li.first {
border:none;
---
HTML
---
div id=page_links
ul class=linksbar
li class=first
a href=faq/index.htmlSearch A-Z Index/a
li
li
a href=faq/top_faqs.htmlMost Asked Questions/a
/li
li
a href=faq/2004.htmlFAQs for Entourage 2004/a
/li
li
a href=faq_topic/sync_services_ical.htmlSync Services/a
/li
li
a href=new2mac.htmlnew2mac amp; Entourage/a
/li
li
a href=menumachine/topnav/navigation.htmlSite Map/a
/li
/ul
/div
---
div id=footer
ul class=footerbar
li class=first
a href=http://www.entourage.mvps.org/;Home/a
/li
li
a href=http://www.entourage.mvps.org/about.html;About/a
/li
li
a href=disclaimer.htmlDisclaimer/a
/li
/ul
--
Diane
__
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/
Re: [css-d] Help broke my template
On 2/8/07 5:53 AM, francky [EMAIL PROTECTED] wrote:
Indeed, this is the direction to find the culprit. You assigned the
{width:150px} to the .quicklinks and so on, but then the border-width is
added to the box-width. Then FF is giving overflow + hor. scrollbar to
see the overflow, and IE is extending the surrounding right-floated
#sidebar (thus extending to the left, coming in conflict with the width
of the content, and dropping down because later in the normal flow).
I omitted the width in the #sidebar and the drop down problem is fixed. I
appreciate knowing what I did and why.
I'm not sure if I created another problem because I also omitted the width
in the right sidebar boxes. They were identical to the left even though they
had not caused a problem. Now in IE 7, part way down in the MVP Links box
the links just stop and the following boxes are not showing up. It's not a
problem in any Mac browser or in IE 6.
Did removing the width do this, or is this a display problem using VPC to
view the pages?
http://www.entourage.mvps.org/
--
Diane
__
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/
Re: [css-d] Links with separator lines
On 2/8/07 6:57 PM, francky [EMAIL PROTECTED] wrote: I think it´s not stupid at all if you don´t see one missing slash after numerous cut-copy-paste actions in a large and complicated code. But you don´t have to see everything yourself by eye and by hand: the validators are eager to help (if clicked ;-) ). As a lazy boy, I first validate if something seems not ok (2 seconds rest to take some coffee), and only if the validators are green, and the error is still there, I´m going to look in the code for bug hunting. :-) Thanks for the reminder. I have become used to the GoLive bugs that are added (obviously they don't cover very much) and have not gotten into the habit of validating my code. Again, thanks for the help. -- Diane __ 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/
Re: [css-d] Help broke my template
On 2/4/07 11:31 PM, francky [EMAIL PROTECTED] wrote:
* testpage 2
http://home.tiscali.nl/developerscorner/css-discuss/test-base2.html
So I guess it must be some margin or padding in the inner parts of the
#sidebar, for when we make the width of the #sidebar some 10px smaller,
it's ok.
How did you come up with 10px?
* testpage 3
http://home.tiscali.nl/developerscorner/css-discuss/test-base3.html
I have some questions on the change you suggested to the sidebar.
div class=quicklinks style=width: 140px;
You mention margins...do I adjust margins for divs inside the sidebar or
simply change the size as you suggested?
Rather than just do-it, I want to understand what I'm doing. I really
appreciate your patience with me on this.
#quicklinks is inside the #sidebar. I have both set for width 150. Is this
wrong thinking to make them the same?
#sidebar {
text-align: left;
width: 150px;
float: right;
margin-top: 0;
margin-right: 0;
margin-bottom: 0; }
/*Quicklinks
*/
.quicklinks {
width: 150px;
border: solid 1px #ccc;
margin: 0;
}
You can view the site with just the cleanup for the divs here:
http://www.entourage.mvps.org/
--
Diane
__
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/
Re: [css-d] Help broke my template
On 2/4/07 11:31 PM, francky [EMAIL PROTECTED] wrote: So I guess it must be some margin or padding in the inner parts of the #sidebar, for when we make the width of the #sidebar some 10px smaller, it's ok. I'm reluctant to even respond at this late hour when my head is mush, but I don't see how you made the #sidebar 10 px smaller. Where in the 'CSS' did you do this? I'm off to bed and will get back to this tomorrow when I am hopefully more clear headed. Thanks for the quick responses. -- Diane __ 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/
Re: [css-d] Help broke my template
On 2/4/07 8:40 PM, ~davidLaakso [EMAIL PROTECTED] wrote: I think it may be markup rather than css issue. Compare the order in which the divisions are closed in Ryan Brill's layout with yours. It is a tricky layout-- very easy to get the division closings out of order. I thought I was being careful to comment out the divs when I set up, but somehow there were some critical changes made. It took a bit to go back and correct my markup, but it's working now. One of my biggest problems is knowing how to troubleshoot problems. I feel like I have made a small step today learning from your suggestions. Thanks to francky for his comments in sending me in the right direction. I wish I had read his Golden Rules of CSS prior to starting my journey into CSS. I especially want to point out to other newbies #5 The personal archive: SAVE EVERY STEP with an OWN VERSION NUMBER! http://home.tiscali.nl/developerscorner/golden-rules-of-css.htm I can recommend to Mac users FolderOrgX. FolderOrg is an AppleScript Folder Action that organizes files and folders by moving them into dated subfolders. This is helpful in keeping files and folders organized by the day they were added, not created or modified. http://homepage.mac.com/dougeverly/folderorg.html -- Diane __ 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] Help broke my template
I was working on my template and broke something. Now the text in the main content area flows into the right sidebar. I added a div in the right sidebar trying to fix a problem on my own for IE and made some minor changes to text in the right sidebar, but not sure what I did to affect the content area. I didn't purposefully make any changes there. I am stuck until I get this fixed. http://www.test.entourage.mvps.org/base.html Link to CSS: http://www.entourage.mvps.org/css/ The template is based on the the 3 column layout on this page http://alistapart.com/articles/negativemargins. -- Diane (with desperate cries of help along with moaning and gnashing of teeth) __ 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/
Re: [css-d] Help broke my template
On 2/4/07 8:40 PM, ~davidLaakso [EMAIL PROTECTED] wrote: I think it may be markup rather than css issue. Compare the order in which the divisions are closed in Ryan Brill's layout with yours. It is a tricky layout-- very easy to get the division closings out of order. But validate first (and I think you need a title other than untitled There is no title since it's my template and I want pages I create ask me for a title. I'll check the div closings. Can you give me a clue as to which one? -- Diane __ 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/
Re: [css-d] Centering images
On 1/13/07 1:19 PM, Mark Lundquist [EMAIL PROTECTED] wrote: On Jan 13, 2007, at 1:17 PM, david wrote: Then the W3C's choice of TEXT-align is a bad choice. It specifies text when it's really talking about something broader than what people think of as text. I agree :-) ml From a newbie standpoint, I agree about the wording. I questioned this and was unsure, but in GoLive the option to select txt-center style gave an img as one of the options when an image was selected. When it didn't work, I entered a fugue state of more newbie confusion. :-) -- Diane __ 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/
Re: [css-d] Centering images
On 1/12/07 7:04 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Should be...
.img_center {display: block; margin: 0 auto;}
It's working now. Thank YOU!!
I didn't find a class .img_center in your on-line stylesheet, so I can't
say why it didn't work. I added one with the styles from my example
above, and it worked perfectly.
I really appreciate your examples. It helps me tremendously.
I'm having a big problem using hr / in the #main content area.
After an hr / the text gets thrown way down the screen.
http://www.test.entourage.mvps.org/atest/
It's pushed down because you have declared 'clear: both' on the hr.
That's how 'clear' works in that kind of layout. It will clear
*everything* in sight - including the side-columns.
You should have a class for 'clear' so you can add it to the hr, or any
other element, when you need it - not add 'clear' permanently to the hr.
Now, for that particular page/layout you can keep that hr-styling, and
solve it by adding...
#main {overflow: hidden; margin: 0; }
* html #main {overflow: visible; height: 1%; }
* html #sidebar {overflow-x: hidden;}
...which will isolate all 'clear' inside #main (and correct the most
troublesome bugs in IE6). Works in all browsers I can lay my eyes on,
from IE6 and up.
I'm not quite sure if I should remove clear from the hr and add a clear
class if needed or add the corrected css you suggested above. Or do I really
need hr in my style sheet?
Where I get myself into trouble is I use examples from another site (I try
to 'borrow from the best) and I don't know enough to understand all the
attributes they have added to the style.
Is this OK?
.clear-both {
clear: both;
}
--
Diane
__
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/
Re: [css-d] Centering images
On 1/13/07 3:27 PM, david [EMAIL PROTECTED] wrote: I'm not quite sure if I should remove clear from the hr and add a clear class if needed or add the corrected css you suggested above. Or do I really need hr in my style sheet? I don't think you need HR in your HTML unless you want to have a horizontal rule there when visitors have CSS turned off. You can use CSS to add a bottom border to the element above the rule instead. I've eliminated the hr for now. You guys are great!! -- Diane __ 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/
Re: [css-d] Centering images
On 1/13/07 4:52 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Since your page... http://www.test.entourage.mvps.org/atest/ ...is already broken in IE6, I suggest you add the extra css to the bottom of your stylesheet - and both the clearing hr problem and IE6' bugs will be gone. You can always remove those few lines later - especially if you comment them clearly so you know why you put them there and what they are supposed to achieve. I'll add these. My audience is for Mac users. I'm a one pony show. I have a FAQ page for a Mac application, Microsoft Entourage. I do realize that many users search the site at work on their pcs so I do want the site to work in all browsers. As an example - I keep these classes in my stylesheets... Thanks! I'll add these. -- Diane __ 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] Centering images
I don't know what I'm doing wrong. When I want to center an image I can only
get it to work if I select div align=center. If I use a class
.txtcenter, .center { text-align: center; }
Or #test img { text-align: center; } the image does not center.
Here is my example:
http://www.test.entourage.mvps.org/faq/center_images.html
Why are these simple things so hard for a newbie? sigh
--
Diane
__
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/
Re: [css-d] Centering images
On 1/12/07 3:23 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Note that text-align: center should not be targeting the image.
Instead: target the container - the div, p or other block-element - and
text and images /inside/ the container will be centered.
You can also center images directly with auto-margins.
I've added a couple of examples to your test page here...
http://www.gunlaug.no/tos/alien/test_07_1560.html
...so you can see how it works.
OK, now I have another question...
If I don't want all my images to be centered, should I use a class for
centering or a style like your example
#test2 img {
display: block; margin: 0 auto;
}
The majority of the images on the site will be centered while a few will be
wrapped in a paragraph.
I tried a class, but this did not work.
http://www.test.entourage.mvps.org/atest/image_center.html
.img_center {margin: 0 auto;
}
I hate to put a different topic in a thread, but in your example you used:
div {border-bottom: solid 1px #777;}
I'm having a big problem using hr / in the #main content area. After an
hr / the text gets thrown way down the screen. At first I thought it was
erasing the text which made no sense until I scrolled down to see it. I
really don't want to have to make divs every where I want to use a
separation line.
On this page, the hr / under the A, pushes text down where it does not
under B and C.
http://www.test.entourage.mvps.org/atest/
div id=abc
h2a id=A name=A/aA/h2
hr /
pa title=AOL Mail with Entourage
href=../accounts/aol.htmlAOL/a/p
My css:
hr {
clear: both;
color: #ccc;
height: 1px;
}
Why are these simple things so hard for a newbie? sigh
Probably so we who are slightly more experienced, can brag about it ;-)
It's humbling, I must say.
--
Diane
__
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] Internal style not honored
In my external style sheet I have h2 as text-align: center. On one page I
want h2 text-align: left. It is not aligning left. What did I do wrong? I
tried making a div specific h2, but that didn't work either.
I used the same code on both pages but it doesn't work on this page. The
only thing that is different is the problem page was created with a template
in GoLive which shouldn't affect anything.
http://www.test.entourage.mvps.org/faq/index5.html
This page using same code is not linked to a template and it works.
http://www.test.entourage.mvps.org/faq/test2.html
head
!-- InstanceBeginEditable name=headContent --
meta name=keywords content= /
meta http-equiv=content-type content=text/html;charset=utf-8 /
titleWebsite A-Z Index/title
style type=text/css
!--
@import url(../../web-content/css/layout.css);
@import url(../../web-content/css/sidebar.css);
@import url(../../web-content/css/style.css);
h2 { text-align: left; }
--
/style
!-- InstanceEndEditable --
/head
--
Diane
__
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/
Re: [css-d] Internal style not honored
On 1/10/07 2:06 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Both the validator and my browsers respond with No style sheet found
since you're importing local CSS files - not online CSS, so there isn't
much we can do to check what's going on.
Apparently I don't understand @import. I used GoLive to set the @import and
assumed it would work when uploaded. Until I get that fixed, the css can be
found here. Centering is in style.
http://www.test.entourage.mvps.org/css/
Apart from that: I'd expect the missing style is related to specificity,
which is something you can check by simply writing...
h2 { text-align: left!important; }
...to make that style more important.
I did have important and removed that to see if that was the problem. I just
uploaded the style.css with change added.
--
Diane
__
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/
Re: [css-d] Firefox breaks sidebar
Follow up: I found the problem. It was an extra main div showing up in the
sidebar. After removing it, everything works as expected. I swear I did not
put the div there. The change happened after I used GoLive to create a
template area. It had added another main div in the content area and I
caught that one, but the one in the sidebar was missed by me.
I did change the image size, but that did not fix the problem nor did
David's suggestion to the CSS. They did help over all so I appreciate the
changes.
BTW, my messages are taking days to show up on the list. Is anyone else
experiencing this problem?
--
Diane
On 12/31/06 9:22 AM, ~davidLaakso [EMAIL PROTECTED] wrote:
Diane Ross wrote:
I made a size change to my right sidebar and now Firefox shows only a part
of the content. Other Mac browsers are OK with the changes. I have no clue
as to what to even check. Help is gratefully appreciated.
In IE7, there is no spacing between some of the side boxes.
http://www.test.entourage.mvps.org/pages/page3.html
I thought my message to the list was lost since it didn't post for two days
and I received a not able to deliver message so I changed the files I had
uploaded. I had combined three css files into one named Entourage. Now I'm
back to three. :-) Is there any benefit from one file over multiple css
files?
On 12/31/06 9:22 AM, ~davidLaakso [EMAIL PROTECTED] wrote:
ul {padding: 0/* 0 1em 5em*/ } zero out padding on ul
#footer { clear: both;} added this ruleset
#left { /*margin-left: 8px; */ }deleted
#main { /*padding-right: 20px; padding-left: 20px; */}deleted
Shorten the long-word so it will hold at text-size largest in ie
from:liDuplicates..remove or create/li
to:liDuplicates: remove or create/li
--
Diane
__
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/
Re: [css-d] Footer problem with 3 col layout
On 12/22/06 5:14 PM, ~davidLaakso [EMAIL PROTECTED] wrote: I don't know what the footer solution is with that particular layout. If you are not far along, and can, or are willing to switch layouts, the 3 column layout on this page http://alistapart.com/articles/negativemargins includes a footer across the entire bottom, and the tutorial explains the use of images to create faux columns for it. It took a bit, but I started over with the layout you recommended. I have it working correctly. I seems to be a simple thing to take a layout and modify it, but I sure do find ways to mess things up in the process. :-) I have only tested in Mac browsers so no telling what will break in IE. I appreciate your suggestion. -- Diane __ 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] Footer problem with 3 col layout
Happy Holidays to everyone.
I'm trying to convert my volunteer site from tables to CSS. I used the
example on http://www.positioniseverything.net/guests/3colcomplexside.html
for my base. The footer for the layout was in the container div, but I want
mine to go across the bottom. I added a clear div that I thought was going
to push it down, but it's not working. I'm a newbie and appreciate any help
you can offer so I can get to the real work of updating the content. GoLive
has mangled the code with extraneous divs. They have multiplied like
bunnies. :-)
Not sure if this is part of the same positioning question, but I need all
the columns to be of equal height. I just don't know enough to understand
where the problem is located.
I tried putting the cleardiv2 before and after contents, but the results
were the same.
You can view page (obviously rough) here:
http://www.test.entourage.mvps.org/
--
div id=cleardiv2/div
/div!--this is the end of container--
div id=footer
footer info goes here
/div
div id=bottom/div
/body
CSS
#cleardiv2
{
clear: both;
height: 1em;
}
/**Begin Footer**/
div#footer {
border-top: 2px solid #5C73BA;
text-align: center;
}
Great listI'm learning a lot.
--
Diane
__
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/
