wondering why this div is over to the right
in [CSS]
|
Prev: Tabs Using CSS1
Next: IE vs. Screenreader
From: TheBicyclingGuitarist on 6 May 2010 14:59 On May 6, 11:28 am, Bill Braun <m...(a)privacy.net> wrote: > TheBicyclingGuitarist wrote: > > On May 6, 9:39 am, williamc <n...(a)nowhere.net> wrote: > >> On 5/6/2010 12:11 PM, Bill Braun wrote: > > >>> TheBicyclingGuitarist wrote: > >>>> added: I just found out the problem only shows when my page zoom was > >>>> at 125%. I don't remember changing the zoom, but when I changed it > >>>> back to normal view zoom the probem disappeared. It's still a mystery > >>>> to me why the one row at 125% zoom had white space to the left and the > >>>> div over to the right instead over to the left... Any ideas on why > >>>> still welcome. > >>> This might be a reach...the div class for the "Online Glossary for Urban > >>> Social Geography, an introduction" is "thumbleft-fudge". All the others > >>> are "thumbleft". I have not looked at the CSS; might that be affecting > >>> subsequent divs? > >>> Bill B > >> Yes. I think it's "catching" on Geography, which has a height. You could > >> add a border and check it. I see this even in FF at certain widths. > > > The dimensions in pixels for thumbleft and thumbleft-fudge are the > > same, but I added padding to the "fudge" one to adjust for the smaller > > size of the graphic used....I think maybe I'll redo that into an image > > with built-in padding to get rid of the need for a "fudge." Thanks > > folks! > > In my small experience I've found that keeping images the > same size, especially on a page such as yours, prevents a > number of pesky problems. I use IRFANVIEW, which has the > ability to fine tune the dimensions of images. > > Bill B- Hide quoted text - > > - Show quoted text - I agree, and I've made the last few images the same size. Some of the others though have very different shapes (wide or tall) compared to the others...I'll check out IRFANVIEW. Thanks for the tip.
From: Swifty on 7 May 2010 05:42 On Thu, 06 May 2010 12:39:57 -0400, williamc <none(a)nowhere.net> wrote: >You could add a border and check it. Some browsers allow you to turn borders on an off without having to change the source (or even reloading the page). The Opera that I used doesn't have this facility built in (well, it didn't when I first looked) but it allows you to add your own overriding CSS files, which you can activate/deactivate via entries in the toolbar "Author Mode" control. I use the following as "Show Borders": table{ border: thin fuchsia solid ! important; padding 1px; } tr{ border: thin blue solid ! important; padding 1px; } th{ border: thin lime solid ! important; padding 1px; } td{ border: thin lime solid ! important; padding 1px; } div{ border: thin yellow solid ! important; padding 1px; } -- Steve Swift http://www.swiftys.org.uk/swifty.html http://www.ringers.org.uk
From: BootNic on 8 May 2010 10:05 On Sat, 8 May 2010 05:46:15 -0700 (PDT) TheBicyclingGuitarist <Chris(a)TheBicyclingGuitarist.net> wrote: > On May 7, 1:35Â am, dorayme <dora...(a)optusnet.com.au> wrote: [snip] >> The only relevant CSS is >> >> div.thumbleft {float: left; width: 240px; height: 300px; >> margin: 0.5em 1em; text-align: center;} div.thumbleft p >> {text-align: center;} >> >> You have seen the problems of having to deal with floats of >> different sizes. There are only management solutions that >> involve deciding on a size for all that will accommodate the >> largest image and caption. >> >> Replacing your CSS with >> >> div.thumbleft {display: inline-block; max-width: 20em; >> margin: .5em 1em; text-align: center;} div.thumbleft p >> {text-align: center;} [snip] > Overall, it does seem to be an improvement, but what did you mean > about IE compatibility? It looks fine in IE8 but I heard ugly rumors > on the internet that it might not in IE7. <!-- support IE 6/7 --> <!--[if lt IE 8]> <style type="text/css"> div.thumbleft { display: inline; zoom: 1; } </style> <![endif]--> [snip] Mainstream support for ie6/7 & xp will soon be over. 65 days and counting. While it may not cause too much pain to support them for this example, is it worth the effort. -- BootNic Sat May 8, 2010 10:05 am If the facts don't fit the theory, change the facts. *Albert Einstein* â 65 days remaining
From: dorayme on 8 May 2010 16:54 In article <27e7b2e9-c6a3-40e7-922d-c0117bd59d4a(a)a16g2000prg.googlegroups.co m>, TheBicyclingGuitarist <Chris(a)TheBicyclingGuitarist.net> wrote: > On May 7, 1:35 am, dorayme <dora...(a)optusnet.com.au> wrote: .... > > Thanks dorayme. I thought that if I specified the dimensions of the > divs to be the same, that they would all float okay. Obviously I > misunderstood the rules or maybe the rules are more complicated. The trouble with constraining the boxes by width and height (especially latter) is that what is text to do if it cannot fit in under unexpected text sizes? > The > inline-block thingie seems to have some advantages over floats. So I > changed the css and renamed the changed css to "style2.css" with the > changes to the studies page shown as "index2.htm" The original form > with the original css is still at > http://www.TheBicyclingGuitarist.net/studies/index.htm > and the new improved by dorayme form is at > http://www.TheBicyclingGuitarist.net/studies/index2.htm > This latter looks much more like you are cooking with gas. It operates nicely on my quick look. > Overall, it does seem to be an improvement, but what did you mean > about IE compatibility? It looks fine in IE8 but I heard ugly rumors > on the internet that it might not in IE7. > See Bootnic's post > I haven't done the wrapper div yet. If I understand you completely, I > would leave the css as modified for div.thumbleft (except that name is > no longer descriptive of the css), make a wrapper div and class THAT > div "thumbleft" (or whatever new name is more descriptive), and remove > the individual declarations of class from all the divs contained > within. That sounds simple and elegant. <div class="wrap"> <div></div> <div></div> <div></div> <div></div> .... <div></div> </div> with ..wrap div {...} instead of <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> <div class="thumb"></div> .... <div class="thumb"></div> with ..thumb {...} -- dorayme
From: TheBicyclingGuitarist on 8 May 2010 22:27
On May 8, 1:54 pm, dorayme <dora...(a)optusnet.com.au> wrote: > In article > <27e7b2e9-c6a3-40e7-922d-c0117bd59...(a)a16g2000prg.googlegroups.co > m>, > > > <div class="wrap"> > <div></div> > <div></div> > <div></div> > <div></div> > ... > <div></div> > </div> > > with > > .wrap div {...} > > instead of > > <div class="thumb"></div> > <div class="thumb"></div> > <div class="thumb"></div> > <div class="thumb"></div> > ... > <div class="thumb"></div> > > with > > .thumb {...} > > -- > dorayme Oh no. I am not getting something here. I made a wrapper div (class="wrap") containing all the divs formerly classed as thumbleft. Then I renamed the thumbleft class in the style2.css file. How do I make the rules for the wrapper div apply to the divs contained within? Sorry if it's a stupid question. I never learned how to do that yet. http://www.TheBicyclingGuitarist.net/studies/index2.htm and http://www.TheBicyclingGuitarist.net/css/style2.css |