Hall of Famer Posted April 8, 2012 Share Posted April 8, 2012 Well I tried to add a pagination script for my site. The codes work out nicely, but the css is having some kind of problem. Well, it messes up with the font style and size specified by the main css. The examples are shown below: Text without pagination css: Text with pagination css: (Note its big, messy and quite disturbing to the eye) So what do you think? I already removed the font size settings from pagination's css, it still wont work. The two css's are shown below, please help me and see if you can fix the font style/size glitch. Thanks. main css: /* Setting Up Basic Styles */ html { background:#222; font-family:Verdana, Arial, Tahoma, sans-serif; color:#333; font-size:12px; } #wrapper { width:950px; margin:0 auto; } table { width:100%; background:#fff; } /* Here's for the top most links */ th { padding:10px; } /* Next is our background for the title box, just save your image to the media folder, and put it's name and type in the box. */ #image { border-left:10px solid #fff; border-right:10px solid #fff; border-bottom:5px solid #fff; background:url("citylights.jpg") left no-repeat #91C7F5; height:150px; } #image span { position:relative; font-size:25px; padding:10px; font-family:Georgia, Times New Roman, serif; } /* Change the color of the link for your site title here */ #image a{ color:#aaa; text-decoration:none; font-style:italic; font-weight:bold; text-shadow: 0px 1px 1px #eee; } #image a:hover { color:#91C7F5; text-shadow: 0px 1px 1px #fff; } /* Standard table cell definitions */ td { background:#fff; } /* Let's fix up your menu */ #menu { width:25%; background:#fff; vertical-align:top; } #menu p{ margin:auto 10px; padding:2px; } #menu h1 { font-size: 11pt; border-bottom: 3px solid #DDD; margin:2px auto 3px 10px; color: #000; text-transform:lowercase; } #menu a { margin:auto 10px; display: block; border-bottom: 1px solid #CCC; padding: 2px; padding-left: 10px; text-transform: uppercase; font-size: 7.5pt; letter-spacing: 1px; } #menu a:hover { background-color: #91C7F5; border-bottom-color: #000; color: #fff; } #content { vertical-align:top; } #footer { font-size:10px; text-align:center; } #content p { padding:3px; margin:auto 10px; } #content h1 { font-size: 16pt; text-transform:lowercase; border-bottom: 1px solid #DDD; margin:10px; color: #000; } a{ text-decoration:none; color:#91C7F5; } a:hover { color:#333; } Pagination css: <style type="text/css"> div.pagination { padding: 3px; margin: 3px; } div.pagination a { margin: 2px; border: 1px solid #000000; color: #000000; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px } div.pagination a:hover, div.pagination a:active { margin: 2px; border: 1px solid #800000; background-color: #800000; color: #FFFFFF; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; text-decoration:none } div.pagination span.current { margin: 2px; border: 1px solid #000000; background-color: #000000; color: #FFFFFF; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px } div.pagination span.disabled { margin: 2px; border: 1px solid #999999; color: #999999; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px } a:hover.list { font-variant: small-caps; text-decoration: underline; text-transform: capitalize; color: #006699; line-height: 200%; } a.list { text-transform: capitalize; font-variant: small-caps; color: #FF0000; text-decoration: underline; line-height: 200%; } </style> Quote Link to comment https://forums.phpfreaks.com/topic/260545-pagination-css-messing-up-with-main-css/ Share on other sites More sharing options...
Hall of Famer Posted April 12, 2012 Author Share Posted April 12, 2012 And no one knows? Quote Link to comment https://forums.phpfreaks.com/topic/260545-pagination-css-messing-up-with-main-css/#findComment-1336614 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.