Update
In my CSS file, I encountered a conflict with the following snippets. When I include this section:
<style type="text/css">
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
The gradient effect below works, but it causes the header banner to shift to the right. If I remove it, the header banner aligns correctly, but then the gradient effect does not function as intended.
body {
background-image:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
a {
Update II
These three lines
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
Have a significant impact on the rest of the page.
They affect this code:
body {
background-image:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
When those 3 lines are removed, the gradient effect and font styling change. Despite the negative impact like displacing the header banner, these lines are necessary for the desired design.
I have one header page, one controller, and one view file linked to the stylesheet in the View.