Jump to content

Recommended Posts

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:

34pe3vs.jpg

 

Text with pagination css: (Note its big, messy and quite disturbing to the eye)

zl4s40.jpg

 

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>

Link to comment
https://forums.phpfreaks.com/topic/260545-pagination-css-messing-up-with-main-css/
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.