straightryder Posted December 18, 2009 Report Share Posted December 18, 2009 Can someone help me with this issue i'm having. *sorry if the photo is a bit blurry* My eyes are killing me from starring at a monitor for 9+hrs. I can't seem to get the text on at the bottom of the images to 'center' completely with the images. What am I doing wrong. One more thing.... this is my first attempt at CSS and designing a site. Please don't flame on me.... Here's the CSS: #content5 { width:1000px; height:120px; background-color:#000; border-top:thin solid white; border-bottom:medium solid white; } #content5 li { display:inline-block; margin:0; padding:0; } #content5 img { padding-right:15px; margin-right:0px; } #content5 p { display:block; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:white; font-size:10px; text-align:center; } Here's the html: Air Consults Taxi Tourist Police Weather Check List Hospitals Accomadations Training Tours Full Moon Party Kingdom Rules I haven't added the a link yet. Im aware of that. Thanks. Quote Link to comment Share on other sites More sharing options...
Wickham Posted December 18, 2009 Report Share Posted December 18, 2009 (edited) The problem is the padding-right on #content5 img while the p tag inside doesn't have padding #content5 img { /*padding-right:15px;*/ margin-right:0px; } the above edit solves the problem for the short words but some sub-titles may be too long and expand out of the div. If you leave the padding and add it to the p tag that works too, but leaves less room for the text:- #content5 img { padding-right:15px; margin-right:0px; } #content5 p { padding-right: 15px; display:block; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color: blue;/*white;*/ font-size:10px; text-align:center; } All the images were in a vertical line in IE7 until I added float: left here:- #content5 li { display:inline-block; float: left; margin:0; padding:0; } Since I can't see all your code, make sure that you have a doctype right at the top of the html page before the tag from here:- http://www.w3.org/QA/2002/04/valid-dtd-list.html XHTML Strict or a transitional because your img codes close with /> On this forum we prefer HTML 4.01 Strict or transitional but it doesn't make much difference now although the future is to be pointing to HTML 5 not XHTML. Edited December 18, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
straightryder Posted December 18, 2009 Author Report Share Posted December 18, 2009 Thank you Wicks. I was gonna try an' make then all a is that a good option? I will do what you said as well. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted December 18, 2009 Report Share Posted December 18, 2009 I was gonna try an' make then all a is that a good option? I don't really see how that changes anything. Personally, since each of these elements are similar and seem to belong together, it seems to make the most sense to use an unordered list. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.