473,320 Members | 1,947 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Are margins the problem?

Hello folks. I thought my home page was all fine and dandy, until I looked
at it with Firefox in a smaller browser window. Instead of the central
graphic dropping down below the text as in MSIE (a bug?), the text
disappears underneath the graphic. Even the nav buttons start to go
underneath if one squishes the window tiny enough.

I was told it's probably not an (X)HTML issue but a CSS issue, and the most
likely culprit is the margin settings for the .photo div

..photo {
width: 43%;
margin: 1em 33% 0 22%;
}

I can't exactly remember why I put these particular values in. It has
something to do with the relative sizes of the three divs that are side by
side on my home page. I notice if I remove the margin settings completely
that in MSIE the graphic moves to the top of the page, not quite as
aesthetically pleasing to me as the way it lines up with the setting in
place. However, in Firefox with the margin settings gone, the graphic
doesn't stay in the middle even at larger screen resolutions. I'm pretty
sure Firefox is the one behaving right here, so I do need left and right
margins at least if I want to keep this layout. But I don't want my text to
disappear beneath the graphic! What can I do?

Is a solution obvious to anyone out there?

http://www.TheBicyclingGuitarist.net/index.htm

I use the @import trick with
http://www.TheBicyclingGuitarist.net...dex_filter.css
to direct smarter browsers to
http://www.TheBicyclingGuitarist.net/css/index.css

Thanks, Chris Watson a.k.a. "The Bicycling Guitarist"

Jul 21 '05 #1
5 1618
Hi,
Is a solution obvious to anyone out there? set the left and right margins of phot to auto and set a div around
welcome, nav and image. Give this div a min-width. For IE you presumably
have to use the IE7-patch (dean.edward.name/IE7), since it does no
min-width...
I use the @import trick with
http://www.TheBicyclingGuitarist.net...dex_filter.css
to direct smarter browsers to
http://www.TheBicyclingGuitarist.net/css/index.css

Don't do this, use "conditional comments" (see google).
hth Chris
Jul 21 '05 #2

"Chris Leipold" <cl******@dietzk.de> wrote in message
news:30*************@uni-berlin.de...
Hi,
set the left and right margins of phot to auto and set a div around
welcome, nav and image. Give this div a min-width. For IE you presumably
have to use the IE7-patch (dean.edward.name/IE7), since it does no
min-width...
I use the @import trick with

Don't do this, use "conditional comments" (see google).

Hello and thanks for the tips. On
http://www.TheBicyclingGuitarist.net/index2.htm (with stylesheets at
http://www.TheBicyclingGuitarist.net...ex_filter2.css pointing to
http://www.TheBicyclingGuitarist.net/css/index.css )
I changed the .photo div right and left margins to auto and that stopped the
text from disappearing, but now the image has way too much white space
between it and the nav buttons to its left. So I tried setting just the left
margin for .photo div to 22% as before and leaving the right margin as auto.
That didn't work; the text disappeared as before. I changed both back to
auto for now on this test page, but as I say there is way too much white
space to the left of the graphic now.
I didn't try the container div because I want the graphic to drop down for
users with smaller screen resolutions. I want my site to be viewable on
handheld internet devices, but with my chosen layout viewable for those with
regular computer screen resolutions.
The "conditional comments" thing seems to be mainly for Internet Explorer.
My site is not a problem for Internet Explorer. It is for those deluded
fools still using Netscape 4.x that I use the @import trick. Correct me if
I'm wrong. I am by no means an expert at this stuff or I wouldn't be
pleading for help here..
Thanks

Jul 21 '05 #3
Chris Leipold wrote:
I use the @import trick with


Don't do this, use "conditional comments" (see google).


There's nothing wrong with using CSS parsing bugs instead of conditional
comments to hide CSS from MSIE.

--
Brian (remove "invalid" to email me)
Jul 21 '05 #4
Brian <us*****@julietremblay.com.invalid> wrote:
I use the @import trick with


Don't do this, use "conditional comments" (see google).


There's nothing wrong with using CSS parsing bugs instead of conditional
comments to hide CSS from MSIE.


Using conditional comments is a reliable way to separate >=IE5 from
other UAs, the use of CSS parsing bugs is not.

--
Spartanicus
Jul 21 '05 #5
Spartanicus <me@privacy.net> writes:
Brian <us*****@julietremblay.com.invalid> wrote:
I use the @import trick with

Don't do this, use "conditional comments" (see google).


There's nothing wrong with using CSS parsing bugs instead of conditional
comments to hide CSS from MSIE.


Using conditional comments is a reliable way to separate >=IE5 from
other UAs, the use of CSS parsing bugs is not.


Agreed, but do note >=IE5/Win. IE/Mac ignores conditional comments,
which is probably a good thing.

--
Chris
Jul 21 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
by: Frances Del Rio | last post by:
when I test my stuff with the validator in HomeSite it tells me the body tag no longer reads margin attributes.. does this mean now margins are to be specified only in CSS? I work for an...
7
by: Richard Lawrence | last post by:
Hi, Consider the following: #Content { margin:0px 210px 50px 200px; padding:10px; } If I use it with the following HTML:
1
by: Maurice Mertens | last post by:
Hello, I'm trying to print a report to the printer but somehow it doesn't take the margins I set. I want the report to have a margin of 0.7 cm (397 twips), so in code I use the following: ...
5
by: Borris | last post by:
<div style="background-color: blue; width: 500px; height: 300px"> <div style="background-color: red; margin-top: 100px; margin-left: 100px; width: 300px; height: 100px"> </div> </div> Where...
8
by: Tinus | last post by:
Hello all, Because you have been so helpfull the last couple of times, I thought after testing and wasting more than 20 pages (and google-ling for 3 days :-( ). I would ask you again for your...
0
by: Todd | last post by:
Hi guys, Strange bug if someone could help. ... Im using printDialog, printDocument and printPreviewDialog to write my print routines for a graphics application. I want to allow the user to...
7
by: steve | last post by:
Hi All I have created rdlc files and when I load them into Report Viewer at run time they appear OK If I click on 'Print layout' button on Report Viewer the view again appears acceptable ...
5
by: Anne DeBlois | last post by:
Hi, We are developing a database application in Visual Basic.NET 2005. The application will print label pages. Using the PrintDocument and GDI+ classes, I noticed a slight change when printing...
7
by: Mark | last post by:
Hi, I am creating application in VB 2005. and when I print report it adds extra 0.45 cm margin on left and top, and the reason for this is physical margins of printer. Is it possible to change...
1
by: pdm | last post by:
I think a well known access problem. If you customize the default margins of a report they doesn't remain fixed. The margins jumps back to the default margins for reports (which are sometimes to...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.